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:

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 pretty! Don’t forget to use the stylesheet in the child theme! 

Notice how fast this page loads?

Synthesis Managed WordPress Hosting

Comments

  1. Kita says

    Hi, I have followed the instructions posted here and it doesn’t seem to be taking effect. I am using the main Genesis theme and the Lifestyle child theme. Lifestyle did not come with an archives.php so I added one, with the code posted above and popped a category with sub categories in it. But my archives pages are still showing the default view. Id love any suggestions or help you could offer as to what I may need to do to fix this. Thank you. :)

  2. says

    Hi, Not sure you still respond to this blog post, but if you do, I need help knowing where to put the category ID as it mentions at the bottom of the PHP code. I am learning CSS, but PHP is still a long way off. I am designing a site for a non-profit agency working with inner-city children and would like to have a grid of photos linking to categories: videos, photos, newsletters, news. This would serve to keep site visitors up to date on what is happening at the ministry. Thanks.

    • Cathy Tibbles says

      Hi Dave,
      UNder the “Loop Additions” comment in the big block of code, is “//loop additions
      //REPLACE THE ONE WITH YOUR CATEGORY ID” There are two places where there is a (1) used. Just replace the “1” (no quotes) with your category ID. Make sense?

      • says

        Thanks for the reply Cathy.
        I finally figured that out. I created a gallery with four photos and linked them to the four sub categories. When I click on the Video link – http://www.davehenkelman.com/LBE/category/media/video/
        under the Media/News main menu item – http://www.davehenkelman.com/LBE/gallery/medianews/ it brings up a blank page. I also tried it with a page with four images in a table, but got the same result.

        Any idea what might be going on?

        Thanks for any help you can give. Really love the look of how your code displays the posts via images.

        Dave

        • Cathy Tibbles says

          Since its not a 404 error, I think there’s something wrong with your template. If you copy/paste your code into a pastebin, I’ll take a look if I have a few minutes tomorrow.

  3. says

    What code specifically are asking for? I am using the Gallery plugin for the page that contains the the sub-category images and links. Or are you asking for the archive.php file?

    Sorry. Lost here.

  4. Cathy Tibbles says

    a gallery plugin likely wont work if you’re trying to use that on category pages? archive.php overrides the category file. All the code you put in the archive file is for the purpose of displaying the posts in that category in a photo-index format… right?

  5. says

    I have place a picture on a page with a link the “video” sub-category. Here is the page – http://www.davehenkelman.com/LBE/media-news/. If I can get this all to work, I will add more images linked to other categories. The sub-category posts are: http://www.davehenkelman.com/LBE/banquet-video/ & http://www.davehenkelman.com/LBE/2013-banquet-video-2/. They are basically the same video, but different posts to have a couple of posts to draw from for the index view.

    The index view is still not working. I have put the archive.php file in a paste bin: http://pastebin.com/Npq7K7gU

    Thanks again Cathy.

  6. Gabrielle Laney-Andrews says

    I found that I had to tweak the posted code a bit to get this solution to work and do quite a bit of CSS work too. But I did get it to work for me.

    My question is can you use the same code for a post type or template? Instead of archive.php could it be set into a template called for instance, gallery.php ?

    thanks for the code, love the look and functionality.

  7. says

    Cathy, before I dive into this awesome tutorial for our food blog, will all the above code still work with Genesis 2.0 and WordPress 3.6 updates?

    If so, this is exactly what I was looking for. Thanks so much for putting this together!

  8. Jo says

    First, THANK YOU for this post & code, it has been most helpful. I’m using the Genesis Lifestyle-Pro theme and am trying to accomplish what you show in your image above for my post categories. I have the code you provided above in place, and it is displaying the posts. The post image wouldn’t appear so I replaced the ‘0’ next to ‘grid_image_size’ => with ‘thumbnail’ and the image now displays.

    Does your code strip out the entry-meta & entry-content (author, comment info, & filed under info)? Is it also supposed to put the post title under the image thumbnail? If so, this is definitely not working for me as you can see here: http://livingmygreens.com/category/recipes/dinner/

    Any ideas? Maybe a theme issue? Any help you could provide in troubleshooting the problem area would be greatly appreciated.

  9. says

    Trying to get this working. The Recipe Index page seems to work fine, but when I click on one of the sub-categories, it displays with the default Genesis archive format.

    I created the category-63.php file with the code I copied from the post (63 is my id for the Recipes category. It appears as if the file never gets executed (I put a deliberate php error in the file and it remains the same as far as display.

    Thanks for any help,

    Bill

Leave a Reply

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