Custom recipe templates for WP Recipe Maker

I frequently work with food bloggers to improve the design, speed, and functionality of their websites. The recipe card is the most important element on the page.

It should be easy to read on all devices, look professional, and express their unique personality. A custom recipe template is a great way to accomplish this.

Note: This tutorial is designed for developers familiar with WordPress and CSS. If you’re a food blogger and need help, contact me. If I can’t help, I can usually direct you to someone who can.

Template Mode: Modern vs Legacy

The first decision you’ll need to make is which template mode to use.

A Legacy template is stored directly in your theme, inside the /wprm-templates/ directory.

A Modern template uses the WPRM Template Editor, accessible in WP Recipe Maker > Settings > Template Editor. You can use their recipe card builder to add blocks, customize their settings, and style them with CSS.

The legacy mode makes sense for developers, but made it difficult for users to modify their recipe cards. You must use the modern template mode to take advantage of new features and specify different recipe designs based on the type of content (ex: food vs how-to).

I’ll walk you through creating a template with both approaches so you can decide which is best for you.

Creating a Legacy Template

Let’s say you want to create a template called “Client Name”. Inside your active WordPress theme, create the following folder structure: /wprm-templates/recipe/client-name/.

Inside the client-name/ directory, create a file named client-name.php. This will hold the markup of your custom recipe card. Also create client-name.css, which will hold all the styling for your recipe card.

You can find examples of legacy templates inside the WP Recipe Maker plugin. Go to /templates/recipe/legacy to see the three legacy themes built into the plugin. I recommend you copy the contents of an existing theme’s PHP file into your custom theme and start customizing it.

To use your custom theme, log into the backend of your WordPress site and go to WP Recipe Maker > Settings. Select “Legacy” as the template mode, and select your “Client Name” template from the dropdown.

Creating a Modern Template

Go to WP Recipe Maker > Settings and make sure “Modern” is the selected template mode. Then scroll down and click the “Open the Template Editor” button. You’ll see a screen that looks like this:

Select one of the existing recipe templates (ex: Basic, Classic…), then click the “Clone & Edit Template” button. You’ll be asked to name the template, then taken to the Template Editor.

I like to start in the “Edit HTML” tab of the Template Editor. I clear out all the extraneous markup and shortcodes I don’t need. I then start writing the markup I need in my recipe template.

The recipe template featured below begins with a site logo, then a two-column header with title and summary on left, image and buttons on right. I have the right column markup first because it will be on top on mobile.

Add blocks

WP Recipe Maker uses shortcodes for each element of the recipe card. They refer to these as blocks in the template editor.

Rather than having to remember all the available shortcodes and their parameters, you can use the “Add Blocks” tab to select exactly which shortcode you need and where you want it inserted. The “Edit Blocks” tab lets you manage the shortcode parameters.

The screenshot below shows the three steps to adding a block

  1. Select the “Add Blocks” tab at the top, then click on a block to add. I selected “Recipe Image”
  2. Select after which block you would like the “Recipe Image” block to appear.
  3. Customize the “Recipe Image” block settings. Select the image size, style, etc.

After you have inserted your block, you can click the “Edit HTML” tab to see the shortcode it generated. The “Recipe Image” block created the following shortcode in my recipe template:

[wprm-recipe-image size="thumbnail"]

Style your template

Now that you have all the blocks you’d like to appear in your recipe card, click the “Edit CSS” tab to begin styling it. As you type CSS, a live rendering of the recipe card will refresh below the CSS editor.

Personally, I prefer writing CSS in my code editor. I use SASS so I can access brand colors via variables, nest styles, and more.

One option is to write the CSS in your theme, then copy it over to Edit CSS when you’re done.

Leave the “Edit CSS” tab empty for now, and create a new recipe.scss SASS file that generates a separate recipe.cssfile. Temporarily enqueue this on the frontend. Build the recipe card stylesheet, testing the recipe card on an actual post rather than the Template Editor. Once the styles are complete, copy the contents of recipe.css to Edit CSS and delete the stylesheet.

Another option is to build your styles in a separate stylesheet and insert it directly above the recipe card. This is what I typically do nowadays.

Finally, you could decide not to add any styles to the Template Editor and keep them all in your theme. This works fine for the standard recipe card in single posts, but in some contexts (like AMP and Print) the recipe card loads without your theme’s stylesheet, so I don’t recommend this approach.

Multiple custom templates

When you have the Modern template mode selected, you’ll notice that you can select templates for more than one type of recipe.

One of my clients uses the “Food” recipe type for recipes and the “How To” recipe type for workouts. We created a custom template for each. The workout template included custom fields for muscle group, difficulty, and equipment needed.

Another client wanted to include a compact version of their recipe card as a featured recipe on category landing pages.

As WP Recipe Maker adds support for more recipe types, and as Google expands the types of schema it looks for, multiple recipe templates will become even more important.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Chile Flake says

    Hi, nice website! .. I’ve been reading all your blog entries and tried to follow and googled what you said but still not quite sure where to start for this:

    – to make a strikethrough format line on each element list (each ingredient in a recipe), meaning: everytime a user clicks on an ingredient line “20 grs of flour”, that line changes to “strike through” format (so, “done!”).
    I just bought the WP Recipe maker and have some knowledge of coding (python and other IT languages, but not really a web front-end one yet).. so could you point me in the rigth direction ? I wonder if this needs to be through PHP, CSS, or some sort of mixture.

    Thanks!

    • Bill Erickson says

      That’s a great question. You might try asking WP Recipe Maker support if they have a recommended solution to that as I’m sure it’s a common need.

      I think the simplest way would be to use JavaScript to insert a checkbox before each ingredient, and when it is checked it toggles a class on the ingredient letting you style it as strikethrough, similar to the ingredient list here.

Leave A Reply