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.
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
1. Create the Main Recipe Index Page
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
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:
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!