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
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 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.
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! :)
View original entry
