The Tasty Recipes WordPress plugin comes with a variety of recipe card templates that you can use on your website with just a click of a button. 

However, we recognize that those styles might not be exactly what you want, so we’ve tried to make it as easy as possible for you to customize. 

Making stylistic changes with CSS

If you’re happy with the overall layout and information presented on your recipe, then you may only need to make stylistic changes with CSS.

CSS stands for Cascading Stylesheets. It’s the language your website uses to communicate style and layout to the reader's browser. If your website was a house, then CSS would be the definition for wall paint color, ceiling height, or type of flooring.

We recommend adding custom styles to the Custom CSS area of the WordPress Dashboard. Navigate to Appearance → Customize → Additional CSS and add your styles there.

Alternatively, Tasty Recipes supports automatically importing a custom stylesheet file. All you’ll need to do is create a tasty-recipes.css file in your theme directory, and the plugin will render the contents of the file any time a recipe is displayed. Using a child theme? Make sure the CSS file is in your child theme directory, not the parent theme. Watch the video below (1 min) to see how to do this.

After you edit your stylesheet, you’ll need to refresh the page (and potentially clear the cache) in order to see the styles applied. If you don’t see your styles applied, you may need to make your style more specific (e.g. .tasty-recipes h3 may need to become .entry-content .tasty-recipes h3 ).

Ready to take your CSS to the next step? Try using the Inspector tool in Chrome, Safari or Firefox to see a real-time preview of your CSS changes.

Sample CSS Tricks

Once you’re in a good place to begin making style changes, here are a few examples of changes you might want to make.

Transform Ingredients and Instructions headings to uppercase

Before:

CSS:

.tasty-recipes h3 {
  text-transform: uppercase;
}

After:

Turn recipe details (e.g. author, yield, total cook time) into an inline list

Before:

CSS:

.tasty-recipes-details ul {
  list-style-type: none;
  margin: 0;
}
.tasty-recipes-details ul li {
  display: inline-block;
  margin-right: 15px;
}

After:

Add a background color to the recipe header

Before:

CSS:

.tasty-recipes h2 {
  background-color: #b12707;
  padding: 10px;
  color: #FFF;
}

After:

Change the color of the print button

Before:

CSS:

.tasty-recipes-print-button {
  background: #396a6f !important;
  color: #fff !important;
}

*/ for both these, change the color, but leave the !important */

After:


Add a border around the recipe

Before:

CSS:

.tasty-recipes {
  border: 1px solid #EFEEFE;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 15px;
}

After:

Modifying the PHP recipe template

If you want to substantially change the layout of the recipe, you’ll need to modify the PHP recipe template. It can be a bit tricky, and potentially take down your site, so we encourage you to try to make your changes with CSS first, which is much less destructive. 

If you are going to attempt making changes with PHP, we recommend having a backup of your site. We like to use VaultPress.

The Tasty Recipes WordPress plugin has support for automatically using a recipe template from your theme. All you’ll need to do is create a tasty-recipes.php file in your theme directory, and the plugin will use this template to render your recipe any time the recipe is displayed. Using a child theme? Make sure the template file is in your child theme directory, not the parent theme. Last, but not least, you can copy and paste the default template as a starting point:

<?php echo $recipe_styles; ?>

<h2><?php echo $recipe_title; ?></h2>

<?php if ( ! empty( $recipe_image ) ) : ?>
<div class="tasty-recipes-image">
<?php echo $recipe_image; ?>
</div>
<?php endif; ?>

<?php if ( ! empty( $recipe_rating_label ) ) : ?>
<div class="tasty-recipes-rating">
<p><?php echo $recipe_rating_icons; ?></p>
<p><?php echo $recipe_rating_label; ?></p>
</div>
<?php endif; ?>

<?php if ( ! empty( $recipe_print_button ) && ! tasty_recipes_is_print() ) : ?>
<?php echo $recipe_print_button; ?>
<?php endif; ?>

<?php if ( ! empty( $recipe_description ) ) : ?>
<div class="tasty-recipes-description">
<?php echo $recipe_description; ?>
</div>
<?php endif; ?>

<?php if ( ! empty( $recipe_details ) ) : ?>
<div class="tasty-recipes-details">
<ul>
<?php foreach ( $recipe_details as $detail ) : ?>
<li class="<?php echo esc_attr( $detail['class'] ); ?>"><strong class="tasty-recipes-label"><?php echo $detail['label']; ?>:</strong> <?php echo $detail['value']; ?></li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>

<?php if ( ! empty( $recipe_ingredients ) ) : ?>
<div class="tasty-recipe-ingredients">
<h3><?php esc_html_e( 'Ingredients', 'tasty-recipes' ); ?></h3>
<?php echo $recipe_ingredients; ?>
</div>
<?php endif; ?>

<?php if ( ! empty( $recipe_instructions ) ) : ?>
<div class="tasty-recipe-instructions">
<h3><?php esc_html_e( 'Instructions', 'tasty-recipes' ); ?></h3>
<?php echo $recipe_instructions; ?>
</div>
<?php endif; ?>

<?php if ( ! empty( $recipe_notes ) ) : ?>
<div class="tasty-recipes-notes">
<h3><?php esc_html_e( 'Notes', 'tasty-recipes' ); ?></h3>
<?php echo $recipe_notes; ?>
</div>
<?php endif; ?>

<?php if ( ! empty( $recipe_nutrifox_id ) ) : ?>
<div class="tasty-recipes-nutrifox">
<div class="nutrifox-label" data-recipe-id="<?php echo (int) $recipe_nutrifox_id; ?>"></div>
<script async src="https://nutrifox.com/embed.js" charset="utf-8"></script>
</div>
<?php endif; ?>

<?php if ( ! empty( $recipe_nutrition ) || ! empty( $recipe_hidden_nutrition ) ) : ?>
<div class="tasty-recipes-nutrition" itemscope itemprop="nutrition" itemtype="http://schema.org/NutritionInformation">
<?php if ( ! empty( $recipe_nutrition ) ) : ?>
<h3><?php esc_html_e( 'Nutrition', 'tasty-recipes' ); ?></h3>
<ul>
<?php foreach ( $recipe_nutrition as $nutrition ) : ?>
<li><strong class="tasty-recipes-label"><?php echo $nutrition['label']; ?>:</strong> <?php echo $nutrition['value']; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php if ( ! empty( $recipe_hidden_nutrition ) ) : ?>
<div class="tasty-recipes-hidden-nutrition" style="display:none;">
<?php
foreach ( $recipe_hidden_nutrition as $nutrition ) {
echo $nutrition['value'];
}
?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>

<?php if ( tasty_recipes_is_print() && get_post() ) : ?>
<div class="tasty-recipes-source-link">
<p><strong class="tasty-recipes-label"><?php esc_html_e( 'Find it online', 'tasty-recipes' ); ?></strong>: <a href="<?php echo esc_url( get_permalink( get_the_ID() ) ); ?>"><?php echo esc_url( get_permalink( get_the_ID() ) ); ?></a></p>
</div>
<?php endif; ?>

After you edit your custom tasty-recipes.php template file, you’ll need to refresh the page in order to see your changes applied.


Did this answer your question?