Adding html for recipe price

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;
}

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?

You can add that once in Customizer > Additional CSS

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

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?

Okay. How do I send a screenshot on here?

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

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

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>';
?>

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?

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

I did, yes

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.

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