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’.
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.
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.
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.
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.
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.
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.
A look at your site should show your newly indexed posts!
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.
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.
* 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!