If you’re familiar with HTML, CSS and PHP it’s easy to code your own custom template to use for your recipes.

Summary

WP Recipe Maker will look for templates in the /wprm-templates/recipe/ folder of your (child) theme, so just add any template as a folder there. The best place to put a custom template is in your child theme, to prevent plugin or theme updates from overwriting your template.

Take a look at the /wp-recipe-maker/templates/recipe/simple/ template as a starting point and make sure to stick to the naming conventions.

For a template “my-custom-template” you need the following files in the /wprm-templates/recipe/my-custom-template/ folder of your child theme:

  • my-custom-template.php – HTML output for the recipe template
  • my-custom-template.min.css – CSS for the recipe template (preferably minified)
  • my-custom-template.png or .jpg – Optional screenshot for the settings page (500 by 400)

For accessing the recipe fields you have the $recipe object available. An overview of all the available functions can be found in the /wp-recipe-maker/includes/public/class-wprm-recipe.php file.

Getting Started

If you don’t already have a child theme on your website you should start by creating one. A child theme makes sure that any changes you make do not get overwritten when you update your theme.

An easy way to create a child theme is to use the Child Theme Configurator plugin. After installing that you can follow the steps on the Tools > Child Themes page to create one. The default values will most likely be fine.

Once you have a child theme you’ll also have to activate it on the Appearance > Themes page.

This step can be done from the WordPress backend with a plugin like WP Editor but is probably easier through FTP or a File Manager.

To start, you’ll want to create this folder structure in your child theme: /wprm-templates/recipe/

This is where you can put any custom recipe templates.

While starting from scratch is possible, it will be easier to copy one of the existing template folders into the above directory. Our templates can be found in the /templates/recipe/ folder of the plugin.

For example:
Copy the /wp-content/plugins/wp-recipe-maker/templates/recipe/simple/ folder and put it in your child theme so you end up with /wp-content/themes/your-child-theme/wprm-templates/recipe/simple/

Any changes you make to the recipe template files in this folder will now be reflected on your website.

Now that you’ve got your own custom template you can make changes to it. For example, if you copied the “simple” template:

In the simple.php file you can change the HTML of the recipes.

In the simple.min.css file you can change the CSS styling. Important: the extension has to be .min.css and not just .css for the file to load.

The simple.scss file is used by us to generate the .min.css file but is not actually required. If you want to make changes here, you’ll have to convert it to regular CSS using something like SassMeister.

If you want to rename the template, make sure the folder and file names remain consistent.

Once you have a custom template it’s easy to change the recipe image size that is being output. Look for the following line of code in the .php file of the template:

<?php echo $recipe->image(); ?>

To get a specific thumbnail size you can pass along the name of that thumbnail:

<?php echo $recipe->image( 'large' ); ?>

Or you can pass along the exact image size you’d like to see:

<?php echo $recipe->image( array( 300, 200 ) ); ?>

Adding the following code to your recipe template will output the nutrition facts as simple text instead of the visual label:

<?php
$nutrition = $recipe->nutrition();
if ( count( $nutrition ) > 0 ) : ?>
<div class="wprm-recipe-nutrition-container">
	<?php
	if ( $nutrition['serving_size'] ) {
		$serving_unit = isset( $nutrition['serving_unit'] ) && $nutrition['serving_unit'] ? $nutrition['serving_unit'] : 'g';
		echo '<strong>Nutrition facts per serving (' . $nutrition['serving_size'] . $serving_unit . ')</strong><br/>';
	}

	$nutrition_output = array();

	if ( $nutrition['calories'] ) 				{ $nutrition_output[] = $nutrition['calories'] . 'kcal'; }
	if ( $nutrition['fat'] ) 					{ $nutrition_output[] = 'Fat: ' . $nutrition['fat'] . 'g'; }
	if ( $nutrition['saturated_fat'] ) 			{ $nutrition_output[] = 'Saturated fat: ' . $nutrition['saturated_fat'] . 'g'; }
	if ( $nutrition['trans_fat'] ) 				{ $nutrition_output[] = 'Trans fat: ' . $nutrition['trans_fat'] . 'g'; }
	if ( $nutrition['polyunsaturated_fat'] ) 	{ $nutrition_output[] = 'Polyunsaturated fat: ' . $nutrition['polyunsaturated_fat'] . 'g'; }
	if ( $nutrition['monounsaturated_fat'] ) 	{ $nutrition_output[] = 'Monounsaturated fat: ' . $nutrition['monounsaturated_fat'] . 'g'; }
	if ( $nutrition['cholesterol'] ) 			{ $nutrition_output[] = 'Cholesterol: ' . $nutrition['cholesterol'] . 'mg'; }
	if ( $nutrition['sodium'] ) 				{ $nutrition_output[] = 'Sodium: ' . $nutrition['sodium'] . 'mg'; }
	if ( $nutrition['potassium'] ) 				{ $nutrition_output[] = 'Potassium: ' . $nutrition['potassium'] . 'mg'; }
	if ( $nutrition['carbohydrates'] ) 			{ $nutrition_output[] = 'Carbohydrates: ' . $nutrition['carbohydrates'] . 'g'; }
	if ( $nutrition['fiber'] ) 					{ $nutrition_output[] = 'Fiber: ' . $nutrition['fiber'] . 'g'; }
	if ( $nutrition['sugar'] ) 					{ $nutrition_output[] = 'Sugar: ' . $nutrition['sugar'] . 'g'; }
	if ( $nutrition['protein'] ) 				{ $nutrition_output[] = 'Protein: ' . $nutrition['protein'] . 'g'; }
	if ( $nutrition['vitamin_a'] ) 				{ $nutrition_output[] = 'Vitamin A: ' . $nutrition['vitamin_a'] . '%'; }
	if ( $nutrition['vitamin_c'] ) 				{ $nutrition_output[] = 'Vitamin C: ' . $nutrition['vitamin_c'] . '%'; }
	if ( $nutrition['calcium'] ) 				{ $nutrition_output[] = 'Calcium: ' . $nutrition['calcium'] . '%'; }
	if ( $nutrition['iron'] ) 					{ $nutrition_output[] = 'Iron: ' . $nutrition['iron'] . '%'; }

	echo implode( ' | ', $nutrition_output );
	?>
</div>
<?php endif; ?>