All the yarn things…right to your inbox. Sign up here.

How to Create Multiple Recipe Index Pages with Foodie Pro WordPress Theme

by | Blog

I’ve used Shaybock’s Foodie WordPress theme for a while now, and have been putting off the free upgrade to her new Foodie Pro* theme for the. longest. time. I wanted to use the Recipe Index feature to catalog my post archives and categories because it looked so clean, but couldn’t find an easy way to do it.  And why limit such a great feature to one page only?! Here’s how I was able to create multiple Recipe Index pages within the confines of the Foodie Pro theme. Oh, and if you don’t have Foodie Pro*, get it! I love the simplicity of both the aesthetics and the cleaniness of the code, which makes it easy to customize any way you see fit.

Before I start, a warning. If you’re not comfortable with editing php files, or working directly in your blog’s file system, this tutorial may not be right for you. It is not a button push change.

Ok. Onwards and upwards!

If you are concerned about editing your production site, consider making these changes on a staging site first. I used WP Stagecoach*, which lets you create staging sites to work in and copies it over to your live site when you’re ready. The push to live production sometimes misses a few details, but I was able to fix those up pretty quickly, and their support team is awesome! I actually used Google Hangout and chatted with my support guy live while he fixed my site (it was my error). Even with the minor hiccups, the ability to tweak my css and php files without tampering with my live site was such a relief! So, consider a staging site unless you like to live bold!

These instructions will include notes for using WP Stagecoach, if you happen to be going that route. Also, make sure you back up your blog before you start. There is no coding involved, just copy and paste, but better safe than panicked!

1. Go into your hosting service’s file manager and find the folder with the Foodie Pro theme. Everyone’s host is different, but it’s usually getting into a cPanel -> File Manager, and then to this folder structure: ‘public_html/wp-content/themes/foodiepro’.

create-new-php-files

Inside, you should see a recipes.php file. Create a new file, and call it recipes2.php. If you want more pages, create more files. I created recipes2.php and recipes3.php.

2. Now we’ll be working in WordPress. (If you’re using WP Stagecoach, here’s when you can create your staging site. The following steps should be done on staging.) In the left sidebar menu of your WP admin site, go to Appearance -> Editor. You should see a recipes.php and your new recipes2.php.

3. Copy the content of recipes.php into recipes2.php.

Foodie-pro-theme-files

4. In recipes2.php, change the Template Name to something new, ie. Recipe Index 3: Holidays. Then go through the file and replace all ‘recipes-top’ and ‘recipes-bottom’ with ‘recipes-top2’ and ‘recipes-bottom2’, respectively. Save the new file.

change-template-name

5.  While still in Appearance -> Editor, now go to the file widgeted-areas.php. At the bottom of the file, you’ll see where the different widget area are created by registering them with Genesis (the genesis-register-sidebar function). Copy and paste the ‘recipes-top’ and ‘recipes-bottom’ sections, and change the id names of the pasted sections to ‘recipes-top2’ and ‘recipes-bottom2’. You can also change the name and description to whatever you need to help you remember what they’re for. Save the file.

register-widget-areas

6. Still hanging out in Appearance -> Editor, we turn our attention to the CSS stylesheet (style.css). Scroll down until you see the section for Recipes Page. Be careful, it’s not the Easy Recipe Plugin. Under the Recipes Page section, add your new id names to each css block, using a comma to separate them. Save your work.

add-new-ids-to-stylesheet

7. Now, go to Appearance -> Widgets, and you should see your new widgets in place and ready for you to customize. Drag over the Foodie Pro – Featured Posts widget and customize it to show different categories, # of post, etc.

new-widget-areas

customize-widget-areas

8. Go to All Pages and either pick an existing page  or create a new page. On the righthand sidebar, there is a Page Attibutes block with a pull-down for page templates. If all went well, you should see your new Recipe Index: Holidays Page Template as an option. Remember that when you switch to this widgeted template, anything you have written in the body of the post will no longer be seen. Choose the new template you created and update the page.

page-attributes-new

A look at your site should show your newly indexed posts!

reciped-index-crochet-example

If you’re using WP Stagecoach, you can import your changes at this point. After you import, make sure to check that the page is using the correct template – mine was not, but it’s an easy fix.

recipe-index-screenshot
And that’s it! With these steps, you can make as many index pages as you want. If you want different index pages to have different looks, just change them accordingly in the CSS stylesheet by separating the different page ids.

What now? Explore more Blogging Tips, find me on Facebook, Twitter or follow me on Instagram!

* Affliate links are indicated by an asterisk. A purchase made through one of those links helps me earn a small commission, the better to bring you great content!

26 Comments

  1. Amanda Smallwood

    Thank you for the informative post! I got a little hung up at step 5 as widgeted-areas.php is no longer a file that Foodie Pro uses. The same info is now inside of functions.php in the Theme Functions section. Worked exactly the same, just had to edit this file instead.

    Reply
  2. John Frøslev

    great help – thanks 🙂 The guide could be updated to latest version of foodie for new bloggers. Widgeted-areas.php is replaced by functions.php – and in step 4, the update is a bit different, where you need to rename “recipe-index-featured-posts” to eg “recipe-index-featured-posts2”. But other than that this was excatly what I needed to create different index pages for the categories in my site.

    Best regards John.

    Reply
  3. Laura Atwood

    In the most recent version of FoodiePro (v406) there isn’t a folder titled “recipes.php

    Any suggestions?

    Reply
    • Laura

      Never mind! I found the recipes.php file.

      Reply
  4. Amy Keene

    I can not figure this out…. can anyone help? I followed the instructions but there is not another recipes top or bottom in my widgets area.
    Thanks!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *