Recipe Calculator Documentation

Go to Admin Dashboard screen -> Plugins and choose Add New from the menu. Up in the screen click on Upload Plugin button. Then click Choose file and navigate to the folder, containing the Recipe Calculator plugin in your computer (recipe-calculator.zip).

Select the zip file and click Install Now button. After this on your screen will appear that plugin was installed successfully.

Click on “Activate Plugin”. Your plugin is now installed and active.

After activating the plugin, Recipe Calculator appears by default before content on your single post. To change these options go to Customizer (Appearance->Customize) and click on Recipe Calculator Settings.  There you will see the following screen:

Display options are explained in detail in the next section.

Default Measurement units are Metric. You can change them to English from the select option.

If your theme uses custom post type for displaying recipes, don’t forget to add it in Post type section.
For example, if your theme uses custom post type, called Recipes – replace post with recipes (the name of your custom post type).

Here you can also change the default red color of portions number and the color on hover of buttons, that increase or decrease portions.

How do you prefer to display Recipe Calculator in your theme? There are 4 options you can choose from: Before Content, After Content, with Shortcode or Manual – where you will have to manually specify where exactly you want the Recipe Calculator to be displayed in your posts.

– Before and After content options will automatically add the Recipe Calculator before or after the content of your single post.

– If you chose the shortcode option, you have to include shortcode in each post, where you want to display it. On your editor will appear button, which will add the shortcode automatically on click. (See the picture below)

– If you choose the manual option, you have to insert the following code in your single.php or in the template file where your recipes are displayed. If you use custom post type for posting your recipes: single-{post_type}.php.

 
//Include Recipe Calculator 
if('manual' === get_theme_mod('rcal_load_recipe_calculator')){ 
recipe_calculator(); 
} 

For example: If your WordPress theme uses custom post type for displaying recipes, called recipes, then the file for displaying single posts, should be called single-recipes.php

After you activate the plugin, on the Add and Edit posts screens you will automatically see appearing the Ingredients and Instructions metaboxes. (See the pictures below)

To add new recipe, first enter the number of portions, then add the ingredients.

Adding Ingredients

For each ingredient you can choose a Measurment unit – ml, L, kg, g, etc. If your ingredient doesn’t have measurment unit (e.g. onion, chicken fillet) – there is option “None”.

If you select “None” option another field will appear where you have to add the plural name of your ingredient. (e.g. Ingredient name is onion –  Ingredient Plural name – onions).

Since version 1.0.7 you can select “empty” option below Measurement unit. Then you can add just an ingredient, without having to specify quantity – for example Salt, Pepper, etc.

Splitting the ingredients

Since version 1.0.3, below Ingredients at the admin area, you have an option to add text(s) that will split the ingredients into groups. This can be useful if your recipe contains sauce or filling and you want to separate their ingredients from the main dish ingredients.

In this meta box 1st you add the text to be shown e.g. Ingerdients for the Sauce and then in the metabox next to it you can specify before which Ingredient Number this text should be inserted. The Ingredient Number is displayed at the top of each ingredient that you add.

If you don’t need to split your ingredients, just leave these metaboxes empty.

This is how it will look at the Front-end:

Adding Nutrients

Since version 1.0.7 you can add nutrients for each recipe. To set all nutrients you want to be shown, you can add them via Settings -> Recipe Calculator screen in Admin area. Once added nutrients will be recalculated per portion as well.

If you enter a number less than 1 and measurement unit is “g” or “гр” in Bulgarian and Russian language, value will be multiplied by 1000 and measurement unit will be automatically changed to “mg” or “мг” in Bulgarian and Russian. As the number of portions increase, once the value reach more than 1000 milligrams, it will be automatically changed to grams and diversed by 1000 and vise versa. See below picture:

Adding Instructions

After writing the 1st step, click on the button Add Another Step to add the next steps.

In the picture below you can see the Files structure of the plugin.

If you want to adjust the style appearance of Recipe Calculator, navigate to the css folder:  recipe-calculator -> public -> css.

After making the desired changes, don’t forget to minify the CSS file and replace the minified version in rcal.min.css, as this is the file that plugin uses.

You can minify the final CSS file contents here: https://cssminifier.com/

The file, responsible for the html output of Recipe Calculator is rcal.php

P.S. If you want to change the red color of the portions number and buttons, that increase or decrease portions on hover you can do it through WordPress theme Customizer -> Recipe Calculator Settings.

I’ve used the following files and icons:

• CMB2 – https://github.com/WebDevStudios/CMB2
  
• float2rat.js – https://gist.github.com/anonymous/4569504
• ionicons – http://ionicons.com/