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.

Quick Links:

  1. Template Mode: Modern vs Legacy
  2. Creating a Legacy Template
  3. Creating a Modern Template
  4. Add Blocks
  5. Style your template
  6. Multiple custom templates

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.

I leave the “Edit CSS” tab empty for now, and visit a page on my development site that is using the recipe card. In my theme I create a new recipe.scss SASS file that generates a separate recipe.cssfile I enqueue on the frontend temporarily.

I build my recipe card stylesheet in here, testing the recipe card in my actual site rather than the Template Editor. Once I have the styles the way I want them, I copy the compiled recipe.css file into the “Edit CSS” tab and dequeue my temporary stylesheet.

You could decide not to add any styles to the Template Editor and keep them all in your theme. This works fine if you only have one custom recipe template, but one of the most powerful features in WP Recipe Maker is support for multiple recipe cards.

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

Leave A Reply