This tutorial takes you through how to make a recipe index for your WordPress food blog and how to make it look absolutely beautiful!
One common question I have seen online concerning food blogs in general is how to create a beautiful recipe index. The Foodie Pro child theme for Genesis comes with a lovely widgetised, visual index (see picture below), but you can only create one with the theme as it is and I often hear people wonder how to build multiple indexes. Well, I have hunted around and haven’t yet worked out how to do create an additional widgetised index, but I have an alternative solution. Indeed, this is a way for everyone to build a really lovely recipe index, including those of you using an unwidgetised blog theme.
I got the inspiration for this structure from the Oh My Veggies food blog. I noticed that this site has both a text-based (check it out!) and a visual recipe index (check it out!), presumably to cater for the different preferences of readers.
I like the look of a visual index, but I also like the increased flexibility of a text-based index. Many of my recipes contain different components that can act as stand alone recipes and the text-based index allows me to list all the sauces, for example, that accompany different meals/posts under ‘Savoury Sauces’.
If I were to include all the dishes that have a sauce component under this heading in my visual index (see picture below!) it would look confusing as the featured images and titles would not accurately reflect these individual recipe components. I also think that you can include much more information in a text index which can be scanned more quickly by someone who wants a comprehensive overview of all the recipes on the site.
But the visual index looks so much more pretty! And offers a lovely way to showcase yet more of your beautiful photography! So, how to make the text index look better?
I noticed that the Oh My Veggies index has each topic represented with a picture with text overlay – for example a picture of a pizza with “Pizza” written over the image:
And when you click on the image the page jumps down to the appropriate list of pizzas further down the page:
I wanted that!
The extra bonus of indexes like these is that you can make as many of these as you want without much hassle or programming knowledge. I decided to stick with just one text and one visual index, but I have them arranged a little differently for different preferences and the text one is definitely much more informative and complete. But the best thing is you get to decide!
So, onto the instructions. First you need to make your representative images with text overlay. Decide how you want to arrange this index (an even number of topics looks best), choose some lovely images to indicate each topic and add the title overlays. There are many different ways to achieve this. You could use Photoshop, or the online blog graphic creation website Canva or even drag/insert the images into a word processor such as Pages, export the page as a pdf, then crop it in a basic editing programme like Preview.
Once you have your images, you need to make them all the same size. The images need to be small enough to sit two next to each other in your content frame, if you want your index to look like mine and Oh My Veggies‘. I also wanted to have a white border around my images, so this meant I had to make them a little smaller than simply the content width (680px in Foodie Pro) divided by two, to make room for the space between the images.
After some experimentation I settled on an image size of 330 x 220px for images with the standard 6 x 4″ dimensions with four spaces (four taps of the space bar) in the middle of each pair.
You could sit three next to each other if you are happy with smaller images – then the width of the pictures should be 213px, allowing for two 20px/four space gaps between each of the three inline images if you want a white border similar to mine around all the images.
The next task is to create a page in WordPress (Pages/Add New) and name it as you choose. I called mine “Recipe Archive” to distinguish it from the visual index (in Foodie Pro) which is also a ‘page’. Add your images to the page, arranging them in the order you have planned previously, remembering to add 4 spaces between each inline image. If you just press ENTER after adding each pair, the space below the images will be very large, so make sure to press SHIFT+ENTER instead to make the next line on the page directly below the one above. When you are in the page editor it will look as though the border much bigger, but when you preview or publish the page you will see that it is an acceptable size.
Okay, so now, hopefully, you have all your labelled images inline as you desire with the correct borders, and in the correct order. Now it’s time to create the text links to all your content. Again, in the order you have planned for your index, create a basic text link to every post you want to archive. Now I have been doing this as I go along, since I started my blog, and I manually add each new post to my archive as I publish it. If there is an automated way to do this, please let me know! As far as I know, the only way I can add multiple links to each post (labelled differently depending on which topic I want to list them under) is to do it myself. If you’ve got a huge site, this is probably going to take a while! Make sure you give each section/topic a title so the reader will know exactly what they have ‘jumped down’ to when they click on the appropriate image.
So, the final task is to create the page jumps. When a reader clicks on one of your topic images, you want them to be transported down the page to the appropriate list of post links. This is the most technical (but totally do-able) part.
First, you need to turn each topic picture into a linkable image. Create a #name for each topic – I used very self-explanatory names that mirrored my topic titles. If the name has more than one word they should be joined by a hyphen. Copying the format below, paste your topic name with its hashtag between the first quote marks. Then paste the link to the same image between the second quote marks. You can find the image link in Text view, by clicking on the image in Media or by clicking on the image in the post preview. Then, copy the entire link code, switch to the Text editor in your page and paste that new link over the existing image code. Does that make sense?!
This:
<a href=”http://deliciousfromscratch.feastdesignco.com/wp-content/uploads/2014/09/Side-Dishes-Small.jpg”><img class=”alignnone size-full wp-image-5827″ src=”http://deliciousfromscratch.feastdesignco.com/wp-content/uploads/2014/09/Side-Dishes-Small.jpg” height=”220″ width=”330″>
Becomes this:
<a href=”#side-dishes”><img src=”http://deliciousfromscratch.feastdesignco.com/wp-content/uploads/2014/09/Side-Dishes-Small.jpg”></a>
Do this for each topic image, making a note of each #name as you go along. Be careful to make the link code exactly right or it will not work.
Lastly (FINALLY!!!) you need to mark the part of the page you want the reader to jump down to when they click on each image. To do this you need to paste another piece of code in the Text editor on the page. Read through the code and find the line before the title of the topic you are jumping to. It is important that you place the code before the title, so the title will be seen by the reader when they click on the representative image. Paste the code before the title, following the structure below and changing the name between the quote marks to the appropriate #name (without the hashtag). Remember to join names of more than one word with hyphens.
This:
<h3><span style=”color: #d1c352;”>Side Dishes</span></h3>
<a href=”http://deliciousfromscratch.feastdesignco.com/2014/03/artichokes-roasted-in-new-season-olive-oil.html” target=”_blank”>Artichokes Roasted in New Season Olive Oil</a>
Becomes this:
<a name=”side-dishes”></a>
<h3><span style=”color: #d1c352;”>Side Dishes</span></h3>
<a href=”http://deliciousfromscratch.feastdesignco.com/2014/03/artichokes-roasted-in-new-season-olive-oil.html” target=”_blank”>Artichokes Roasted in New Season Olive Oil</a>
Repeat for each topic. That’s it!
Preview the page and be sure to check each page jump by clicking on each image to make sure the reader will be taken to exactly where you want them. If it isn’t working, check the codes very, very carefully. One wrong character and the link will be broken. Then publish!
Depending on what order you create your visual and text-based indexes, at some point you will presumably want to link one to the other. This requires them both to be published, but is then just a simple matter of creating a basic link (in the Visual editor is fine) at the very top of the page. I found that little arrow in my Character Viewer.
Ta da!
This may seem like a lot of work, and let’s face it, it is! But I found it incredibly satisfying to get this done, to get it done right, and was really, really happy with the result. I actually went to sleep that night (far too late I might add), with a huge smile of contentment on my face.
If you find any of this description confusing – it has been hard trying to think of how to explain it all clearly – do leave a comment and I’ll try and explain further. And remember I have other Foodie Pro tutorials if you want to check them out! Good luck!
