How to Create a Recipe or Photo Index in Genesis

These templates/snippets will work only if you have the Genesis Framework installed and a child theme active.  This will provide a graphic / image based index of your photos or recipes categories.

Image Index for Recipes or Photos
Image Index from FramedCooks.com

Before you start, you’ll need this:

  • FTP access
  • Text / Code editor
  • All posts for this index in one big category, for example, “Recipes” with all the sub-categories below that.  Each post/recipe should be placed in one of the sub-categories.
  • The ID of the recipe category
WARNING: adding this code to your site can break it entirely – cause it not to show up.  I recommend making changes to your files via FTP and only after you’ve taken a backup!!

1. Create the Main Recipe Index Page

Image Index for Recipes or Photos
Image Index from FramedCooks.com

Create a new Page (not post) and add your sub-category images.  Link each of these images to your sub-categories. For example: www.myblog.com/category/recipes/beverages

In the FramedCooks index (see image above) the sub-categories were Appetizers, Breakfast & Brunch, Lunch and so on.

Then style appropriately.  We added captions and left-aligned our images in the ‘insert media’ screen.

2. Create the Recipe Category template

veggies Framed Cooks

Now we’ll create the templates for each sub-category. If these categories have their own subcategories (see photo) we’ll display those at the top for easy navigation.

Instead of displaying a list of posts (in excerpts, or full posts – whatever your theme does by default), we will display the recipes by photo only. We’ll display the post title beneath the photo. And we’ll display the photos in a grid.

First you need to find your “recipe” category and its corresponding ID.

1. To find the ID, download the plugin: Reveal IDs.

2. Go to your dashboard, to Posts -> Category panel. Find the “Recipe” category and write down the ID.

3. Open your code-editor (ie: crimson editor). Create a new file called category-ID.php (replace “ID” with your recipe category ID).

4. Copy and paste this code into the category-ID.php file:

https://gist.github.com/cathytibbles/de8b46e0d5b0c8c239d3
Save.

5. Open your FTP client (ie: Filezilla), log into your site.  Upload this file to wp-content/themes/your-child-theme/

3. Style your Image Index with CSS

You will need to come up with your own styles to make it your own. Don’t forget to use the stylesheet in the child theme.