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.

---

WPRM offers two different ways to build a custom recipe template:

1. WPRM Template Editor lets you clone an existing template and tweak it to your needs. It’s a great option if you just need to change colors or re-arrange a few items in the recipe card. The template is stored in the database.
2. Theme Templates are recipe templates built directly in your WordPress theme, and are a better choice for fully custom recipe templates designed to match a specific theme.

As a developer, I prefer the theme templates because they are version controlled with my theme and I can use SASS to compile the CSS files. But if you just need to make a few tweaks to an existing template, the Template Editor is by far the simpler option.

WPRM Template Editor

The simplest way to build a custom recipe template is with the built-in Template Editor.

Go to WP Recipe Maker > Settings, then click “Open the Template Editor”. Select an existing template, then scroll down and click “Clone & Edit Template”.

I recommend you start by cloning one of the newer recipe templates like Chic so you’ll already have all the newest features set up in your template.

The CSS classes you use to style your template will use the name you provide for your custom template, so it’s a good idea to keep the name as short as possible. If you named the template “My Custom Template”, the CSS class would be .wprm-recipe-template-my-custom-template.

I typically name the template using an acronym of the site and the type of recipe card. I named the food recipe card on Practically Functional “PF Food”.

Template Properties

The “Template Properties” tab lets you customize the styling of the recipe card. You can change colors, font families, font sizes, and more.

Edit Blocks

The “Edit Blocks” tab lets you customize the settings for each element in the recipe card. For instance, if you click on the “Recipe Name” block you can change the Text Style, HTML Tag, and toggle if it is linked.

Add Blocks

Click the “Add Blocks” tab to add new elements to the recipe card. First you’ll select the element you’d like to add, then select the existing element after which it should be placed.

Remove Blocks

The “Remove Blocks” tab will let you remove an existing element from the recipe card.

Edit HTML

You can use the “Edit HTML” tab to add custom markup around the blocks in your recipe card, or manually edit the blocks themselves.

The “blocks” in a WP Recipe Maker template are actually shortcodes, and the block settings are shortcode parameters. Sometimes it is easier to use the Edit HTML tab to manually update many blocks at once (ex: remove text_style="bold" from each block).

Edit CSS

The “Edit CSS” tab lets you control the actual CSS used for this recipe card. Some of the styles are using variables so they can be controlled in the Template Properties tab (ex: background-color: %wprm_background%;).

Notice that all of the styles are prefixed with the template-specific CSS class. This is because multiple WPRM recipe cards could appear on a single page. Your post may include a few Roundup recipe cards, followed by the main Food recipe card. If you just style the element (ex: .wprm-recipe-name) it will affect every recipe card on the page.

Theme Template

Inside your WordPress theme, create a wprm-templates directory, then a recipe directory inside of that. Inside of that you can create a directory for your custom recipe template.

Inside the custom recipe template directory, create an HTML file and CSS file with the same name as the directory. Here’s a screenshot from my theme directory:

Set up your template

Your recipe template will only contain HTML markup and shortcodes. All of the WPRM functionality is implemented using shortcodes, and any custom functionality you would like to build into it should also be built as a shortcode.

My preferred method of setup is to copy the newest WPRM recipe template (right now it is Chic) so all of the shortcodes are pre-configured, then stripe out all the unnecessary markup and start customizing it.

You can find the WPRM recipe templates in /plugins/wp-recipe-maker/templates/recipe/modern/

Set up your CSS

It is best to use the required CSS file for your recipe template styling. While you could style the recipe template in your theme’s main CSS file, there are instances when your theme’s CSS file might not load. When a user clicks “Print Recipe”, only the Print recipe template’s CSS is loaded.

Make sure all of your CSS is prefixed with .wprm-recipe-template-{template-name} so your styles don’t apply globally to all recipe templates.

I personally use SASS for styles in my WordPress themes, and I use it for the recipe templates too. Just make sure you set it to compile CSS in the recipe template directory.

Template Editor for shortcode reference

The hardest part of building a recipe template outside of the WPRM Template Editor is remembering the shortcodes and available parameters. You could dig into the plugin files to find the information, in /plugins/wp-recipe-maker/includes/public/shortcodes/recipe/.

I find it simpler to create a blank template in the WPRM Template Editor and use it for building shortcodes. For instance, if I needed to tweak the settings for the Instructions shortcode:

1. Go to Add Blocks > Recipe Instructions.
2. On the Edit Blocks tab, customize the instructions as needed.
3. Go to Edit HTML tab, copy the shortcode. Paste it in my theme template.