Recipress is a free, professional quality plugin for adding beautifully styled recipes to your blog posts. Since I’ve been told my JalapeƱo bread is to die for, I thought maybe it would be worth adding the recipe to my Self Sufficiency blog - and this was the perfect solution to do that.
Let’s take a look at this fantastic plugin, and a quick walkthrough on how to add and display your recipes.
Display Options
Recipress can output your recipes in a variety of places, with the default being on single post pages only just after the main content (if there is any). If you want the full recipe to appear in search results or the index, archives, etc you can do all of that.
There are 3 main display styles to choose from – light, dark, and textured – so it should suit most blogs. Though I haven’t tried, I imagine you can edit the individual CSS files if you wanted to change them, though there is no specific “upload custom CSS” option.
Custom Taxonomies
Taxonomies are added for ingredients, cuisine style, course, and skill level – but you needn’t use the latter 3 if you don’t want them. The plugin comes with about 18 ingredients pre-programmed for you, but adding more is as easy as… pie?
Adding A Recipe
You’ll find a new custom section on your post edit screen, and ticking the “Add a Recipe to this post?” checkbox will enable the recipe editor.
It’s broken down into 3 parts. The first is some basic meta about the recipe – prep time, yield – that sort of stuff.
Next up are the ingredients. The ingredient names are all contained within a separate taxonomy, so they work like tags. As you add your own archive of ingredients, they will appear when you start typing the first few letters.
Creating them as a whole taxonomy also means you can do things like list all recipes with “chilli”, or show an ingredient cloud widget. Other than that, it’s easy to add amounts, notes, re-arrange the order or ingredients, etc.
Finally comes the instructions which are broken into steps. Each step can have an individual photo added. At the time of writing this, I did have a small bug with the latest jQuery – if you find the upload image dialog goes blank after clicking “Use this image“, open up your the wp-content/plugins/recipress/js folder, and replace the contents of back.js with the code from this pastebin. Hopefully the author will release an update soon to fix that officially, but this will suffice for now.
I should also add that you need to upload images for the recipe in the size you’d like them to display – it takes the original URL rather than the thumbnail or medium sizes. The plugin could do with some auto-resizing options, but to work around this either resize before you upload, or add the following CSS rules to your theme’s style.css
/* Change to the width of your post section, this refers to the step pictures */
#recipress_recipe.recipress-recipress img {
width: 450px ;
height: auto ;
margin: 10px 0 ;
}
/* Assume thumbnail size of 150px for first image in recipe */
#recipress_recipe.recipress-recipress img.wp-post-image{
width: 150px;
height: auto;
margin: 10px 0;
}
To set the “finished recipe” image, just use the standard WordPress featured image. You can adjust this in the Recipress options if you’d like to use a different image though.
You should end up with something like this:
Summary
The display style of this plugin is beautiful, and adding recipes honestly couldn’t be simpler. There some great widgets included, and if you plan on writing a lot then use of a full custom taxonomy for ingredients is really innovative.
On the downside, there’s a few bugs as I’ve outlined already. Also, the output is mostly hRecipe formatted for rich snippet data, but it’s missing quite a few crucial parts, so the implementation isn’t complete and Google doesn’t parse it as such. This should be an easy fix though, so hopefully the author will update soon. There’s a Pro version in the works according to the support site.
What do you think? Will you be posting some recipes for us?
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
ReplyDeleteflash to html5 converter