[Resolved] Adding html for recipe price

[Mitch and Justine]

Hi,

We are trying to add the total cost of recipes and cost per serving right below our H1 in single blog posts, but above the breadcrumbs.

We want it to look similar to this blog: https://www.budgetbytes.com/vegetable-barley-soup/. We found this code by inspecting the website, but are not sure how to add it, how to change the color, and how to change the font.

Here is the code we found: <div class="post-meta"> <span class="cost">$6.67 recipe / $1.11 serving</span></div>

Thanks in advance,
Justine and Mitch

[David]

Hi there,

You can try following these steps:

1. Create a Custom Field in your Post editor:

https://wordpress.org/support/article/custom-fields/

1.1 For the example give the field a Name of cost and put in your value eg. $6.67 recipe / $1.11 serving

2. Now create a Hook Element in Appearance > Elements:

https://docs.generatepress.com/article/hooks-element-overview/

2.1 Add this code to the content:

<?php
$cost = get_post_meta( get_the_ID(), 'cost', true );
if ( $cost ) {
    echo '<span class="recipe-cost">' . $cost . '</span>';
}
?>

2.2 Select after_entry_title from the Hook List.
2.3 Check execute PHP.
2.4 Set the Display Rules to Post > All Posts – i am assuming you’re using Posts for your recipes
2.5 Publish your hook.

3. Now we can use the recipe-cost class in our CSS:

.recipe-cost {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: orange;
}

[Mitch and Justine]

I’ve done everything, except add in the CSS code. Where do I add that in? Do I add it in from the main customization panel, or in each individual post?

[David]

You can add that once in Customizer > Additional CSS

[Mitch and Justine]

Okay we followed all those steps, but it’s not working still.

[Tom]

Hi there,

Can you show us a screenshot of the custom field filled out in the back-end of the post so we can make sure it all looks right?

[Mitch and Justine]

Okay. How do I send a screenshot on here?

[David]

Save the screen shot to your Media Library or cloud/share drive and then share with us the URL to the image

[Mitch and Justine]

https://brokebankvegan.com/wp-content/uploads/2020/05/Custom-Field.png

[David]

Looks ok.
For the Hook content code can you try this instead temporarily:

<p>If you see this then the hook is working</p>
<?php
$cost = get_post_meta( get_the_ID(), 'cost', true );
echo '<span class="recipe-cost">' . $cost . '</span>';
?>

[Mitch and Justine]

Okay, so the “if you see this then the hook is working” is showing up now!. But how do we change it to be individual prices for each post?

[David]

Silly question … when you added the Custom field did you click the Add Custom Field afterwards ?

[Mitch and Justine]

I did, yes

[David]

Aaah i think its because the Custom Field is case sensitive.
Can you edit the custom field name. Change it from Cost to cost and hit update.

[Mitch and Justine]

Okay, that worked! Thanks so much. How can we also change the font size, weight, and color? We want it in #ff6060 and bolded.

[Author]

Posts