Recipe Calculator

Recipe Calculator

Functionality, that your readers will love!

The 1-click option for customizing the portions of your recipes and instantly recalculating the needed ingredients.


  • On increasing/decreasing of portions units are changing:
  • - portions text – from portion to portions (if more than 1 portion is selected);
    - from Single to Plural name of ingredients (eg. Chicken fillet gets Chicken fillets) and vice versa;
    - from ml to L – (ex. 1100ml gets 1.1L) and vice versa – from L to ml;
    - from g to kg and vice versa – from kg to g (eg. everything below 1kg is displayed in g and everything above 1000g is displayed in kg – 1100g gets 1.1kg );
    - from cup to cups and vice versa;

  • Responsive
  • Option in Theme Customizer to choose between Ionicons icons or CSS styled icons.
  • Option in Theme Customizer to disable the default CSS style and use only Basic CSS styling.
  • Lightweight – on the front-end Recipe Calculator loads the following styles and scripts:

    If you choose CSS styled icons in the Theme Customizer total of 10KB or 11KB
    - 1 CSS file of 2KB (the basic CSS style) or 1 CSS file of 3KB (the default CSS style), depending on your choice.
    - 2KB of embeded in head styles for the CSS icons.
    - 1 JavaScript file of 6KB.

    If you choose in the Theme Customizer to use Ionicons icons and Google webfont Roboto: around 75KB – 76KB
    - 1 CSS file of 2KB (the basic CSS style) or 1 CSS file of 3KB (the default CSS style), depending on your choice.
    - 1KB of embeded in head styles for the styling of Ionicons icons.
    - 1 JavaScript file of 6KB.
  • Externally loaded styles and scripts on the front-end (You can disable them in the Theme Customizer):
    - Ionicons (ionicons.min.css – 51KB) – loaded externally from CDN (MaxCDN). Used for the styling of (+) plus and (-) minus buttons, and for the (✓) check mark, added when you click on an ingredient to mark it as added.
    - 1KB of embedded JavaScript code in footer, that loads Google webfont Roboto at weights 300,400,900 for display of all text of Ingredients and Instructions. This loads webfont.js from Google CDN, which is 12.8KB and some CSS styling.

  • The width of both columns for ingredients and instructions is 50%. But if the content section, where they are displayed in your theme is less than or equal to <= 800px, their width changes to 100% – for better display.
  • Interactive
  • supports Structured data markup to boost your SEO
  • available in 6 Languages
See it in action in the preview below recipe-calculator Sample Preview in Theme: recipe calculator preview food blog

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).

Recipe Calculator Plugin

Adding Instructions

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

Recipe Calculator Plugin

Recipe Calculator will make the life of your visitors much easier, when they want to cook less (or more) portions than the default, given in a recipe. For you it can be a very powerful tool for increasing the returning visitors on your website, because… well, no one likes calculating.

Wouldn’t you prefer coming back to a website, that provides you with 1-click option for customizing the portions of your favorite meal and instantly recalculating the ingredients for you? Without losing time in calculations, you can prepare dinner for the friends, you have invited over this weekend.

And, if your visitors are like me – such that can’t cook and have to follow very strict every recipe they want to prepare, otherwise the result is total disaster – they will love you for having this functionality on your website!

My intention, creating this plugin was to help you serve your visitors better – in a way that they will truly appreciate, and stay your loyal fans.

Recipe Calculator helps you deliver great experience to your users throughout all screens – mobile, tablet and desktop.

It lets the user change the amount of portions in 1 click and automatically recalculates the amount of ingredients needed for the preparation of a recipe.

When the user clicks or taps on an ingredient that they already have, it changes its opacity. This makes it easy to see the ingredients they have to add.

Structured data markup
If your WordPress theme uses Structured data markup for Recipes, Recipe Calculator comes ready with microdata markup for the following fields from recipeYield, recipeIngredient and recipeInstructions.

It also supports microformats2 h-recipe with the following class names: p-yield, p-ingredient and e-instructions.

Recipe Calculator is currently available in English, Dutch, Bulgarian, German, Spanish and Russian.