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 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 main category

1. Create the Main Image Index Page

Create a new Page (not post) and simply create a gallery of your favorite images – one representing each sub-category.  In the above image, the sub-categories were Appetizers, Breakfast & Brunch, Lunch and so on.  Then style appropriately.  Link each of these images to your sub-categories.

Now we’ll create the templates for each sub-category to automatically display all the latest yummy-ness or photos.

2. Test for child categories using a custom function

Add this to your child theme’s functions.php:

//by ValenDesigns.com

// If is category or subcategory of $cat_id
if (!function_exists('is_category_or_sub')) {
	function is_category_or_sub($cat_id = 0) {
	    foreach (get_the_category() as $cat) {
	    	if ($cat_id == $cat->cat_ID || cat_is_ancestor_of($cat_id, $cat)) return true;
	    }
	    return false;
	}
} 

3. Add an archive.php template to Genesis child theme

Add this file in its entirety to your child theme folder and name it archive.php.  If you already have an archive template, this will NOT work – you’ll need to add these functions carefully to the existing file so you don’t disable current functions.

';
	$title .= single_term_title('', false );
	$title .= '';
	echo $title;
}

//list subcategories or siblings 
function dswp_listsubcats () {
	foreach (get_the_category('') as $category);
	$cat = get_query_var('cat'); 
	$cat_id=$category->cat_ID;
 	$child_cats = get_categories('child_of='.$cat);
 		if ($child_cats) { $args = array(
    'title_li' => '',
    'depth' => 1,
    'echo' => 1,
    'child_of' => $cat
    ); ?>
  	

    
    
	'.get_the_post_thumbnail($post->ID, 'thumbnail').'
';
			}
		}
 /**
 * Grid Loop Divider
 * @author Bill Erickson
 * @link http://www.billerickson.net/genesis-grid-loop-content/
 *
 */
function dswp_grid_divider() {
	global $loop_counter, $paged;
	if ((($loop_counter + 1) % 3 == 0) && !($paged == 0 && $loop_counter < 2) ) echo '
';
}

        //grid function 
        function dswp_grid_helper() {
   
       		// Ensure the arguments for the normal query for the page are carried forwards
	    	global $query_string, $paged;
 
    		// If you're using a Page to query the posts (e.g. with the Blog template), comment out the next line.
    		wp_parse_str( $query_string, $query_args );
 
		    $grid_args = array(
        		'features' => 0,
        		'feature_image_size' => 0,
        		'feature_image_class' => 'alignleft post-image',
        		'feature_content_limit' => 0,
        		'grid_image_size' => '0',
        		'grid_image_class' => 'alignleft post-image',
        		'grid_content_limit' => -1,
        		'more' => __( '', 'genesis' ),
//change this if you would like more or less photos per page
        		'posts_per_page' => 24,
    		);
 
    	// Make sure the first page has a balanced grid
    		if ( 0 == $paged )
        // If first page, add number of features to grid posts, so balance is maintained
        $grid_args['posts_per_page'] += $grid_args['features'];
    		else
        // Keep the offset maintained from our page 1 adjustment
        $grid_args['offset'] = ( $paged - 1 ) * $grid_args['posts_per_page'] + $grid_args['features'];
 
    // Merge the standard query for this page, and our preferred loop arguments
    genesis_grid_loop( array_merge( (array) $query_args, $grid_args ) );
 	}

    genesis(); 

You need to add your own category ID where it is marked in the code.

This code does the following:

• Displays the category title (ie: Recipes)
• Displays a list of sub-categories (ie: Appies, Beverages, Desserts, etc)
• Displays a grid of thumbnails that are “thumbnail” sized
• Displays 24 thumbnails with pagination

4. Style your Image Index with CSS

You will need to come up with your own styles to make it pretty!

Need a hand?  Let me know in the comments or hire me to help!  :)