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.
Table of Contents
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
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.
Let’s say you want to create a template called “Client Name”. Inside your active WordPress theme, create the following folder structure:
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.
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.
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
- Select the “Add Blocks” tab at the top, then click on a block to add. I selected “Recipe Image”
- Select after which block you would like the “Recipe Image” block to appear.
- 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:
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.
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.