Category images Grid Template in Genesis

I have got a couple of users asking how to display a grid of category thumbnails each linking to their respective category pages. In this article I share a custom Page Template to show images set for categories in a grid on a static Page.

categories-grid

We are going to use Categories Images plugin to set image for each category and Column classes (built in Genesis) for the grid display.

Step 1

Let’s define a custom image size for the category images and set Post’s featured image to be displayed on single Post pages. Add this in functions.php:

1 2 3 4 5 6 7 8 9 10
//* Add new image size
add_image_size( 'category-image', 350, 263, true );
 
//* Display left floating featured image on single Posts
add_action( 'genesis_entry_content', 'show_featured_image', 9 );
function show_featured_image() {
 
if (is_singular( 'post' ))
genesis_image( array( 'size' => 'medium', 'attr' => array ('class' => 'alignleft') ) );
}
view raw functions.php hosted with ❤ by GitHub

Step 2

Install and activate Categories Images plugin. Go to Posts > Categories, edit the categories and upload/set an image for your categories.

2014-03-25_11-52-41

Category description can be set by ‘fully’ editing the category.

category-description-wordpress

Step 3

Create a file named say, page_categories_grid.php having the following code in child theme directory:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<?php
/*
Template Name: Categories Grid
*/
 
# Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
# Remove the breadcrumb
// remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
# Remove the post title
// remove_action( 'genesis_post_title', 'genesis_do_post_title' );
 
add_filter( 'body_class', 'categories_grid_body_class' );
/**
* Adds a css class to the body element
*
* @param array $classes the current body classes
* @return array $classes modified classes
*/
function categories_grid_body_class( $classes ) {
$classes[] = 'categories-grid';
return $classes;
}
 
# Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
# Add custom post content
add_action( 'genesis_entry_content', 'sk_do_post_content' );
 
/**
* Outputs custom post content
*
* @return void
*/
function sk_do_post_content() {
 
$i = 0;
$columns = 4; // Set the number of columns here (2 to 6)
 
$column_classes = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
$class = $column_classes[$columns];
 
$args = array(
'orderby' => 'name',
'parent' => 0
);
$categories = get_categories( $args );
foreach ( $categories as $category ) {
if (z_taxonomy_image_url($category->term_id)) { // if category image exists
if ($i % $columns == 0) {
echo '<div class="'. $class . ' first category-item">';
}
else {
echo '<div class="' . $class . ' category-item">';
}
// Category title
echo '<h2 class="category-title"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a></h2>';
 
// Category image linking to category archive
echo '<a href="' . get_category_link( $category->term_id ) . '"><img src="'. z_taxonomy_image_url($category->term_id, 'category-image') . '" /></a>';
 
// Category description
echo category_description( $category->term_id );
 
// Custom 'Read More' link
echo '<a href="' . get_category_link( $category->term_id ) . '">All Posts under ' . $category->name . ' category &raquo;</a>';
 
echo '</div>';
 
$i++;
}
}
 
}
 
genesis();

The number of columns can be set in line 38. If Category description and/or the custom ‘Read More’ link below that are not to be shown, the corresponding lines of code can be commented out or removed.

Note: We are setting only top level categories to be displayed and only those that have an image associated.

Step 4

Create/edit an existing Page and apply Categories Grid template to it.

2014-03-25_11-54-29

Step 5

Add the following in style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
/* Categories Grid
----------------------------------------- */
 
.categories-grid .entry-header {
margin-bottom: 40px;
}
 
.categories-grid h2.category-title a,
.categories-grid h3.category-title a {
border-bottom: none;
}
 
.categories-grid .category-item {
margin-bottom: 40px;
}
 
.category .entry-title {
word-wrap: break-word;
}
 
.categories-grid .category-item p {
margin-top: 10px;
margin-bottom: 10px;
}
view raw style.css hosted with ❤ by GitHub

Step 6

[Optional] If you would like the category archive pages to display Featured images of Posts in a grid, create a file named category.php having the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
<?php
/**
* This file adds the category archive template.
*
*/
 
//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
 
//* Remove the breadcrumb navigation
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
 
//* Remove the post info function
remove_action( 'genesis_entry_header', 'genesis_post_info', 5 );
 
//* Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
 
//* Remove the post image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
 
//* Add portfolio body class to the head
// add_filter( 'body_class', 'executive_add_portfolio_body_class' );
function executive_add_portfolio_body_class( $classes ) {
$classes[] = 'executive-pro-portfolio';
return $classes;
}
 
/**
* Display as Columns
*
*/
function be_portfolio_post_class( $classes ) {
$columns = 4; // Set the number of columns here
 
$column_classes = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
$classes[] = $column_classes[$columns];
global $wp_query;
if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )
$classes[] = 'first';
 
return $classes;
}
add_filter( 'post_class', 'be_portfolio_post_class' );
 
//* Add the featured image after post title
add_action( 'genesis_entry_header', 'sk_category_grid' );
function sk_category_grid() {
 
if ( $image = genesis_get_image( 'format=url&size=category-image' ) ) {
printf( '<div class="category-grid-post-featured-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
 
}
 
}
 
//* Customize entry meta in the entry header
add_filter( 'genesis_post_info', 'sp_post_info_filter' );
function sp_post_info_filter($post_info) {
// $post_info = '[post_date] by [post_author_posts_link] [post_comments] [post_edit]';
$post_info = '[post_date] [post_edit]';
return $post_info;
}
 
//* Remove the post meta function
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
 
genesis();
view raw category.php hosted with ❤ by GitHub

fruits-category-page-grid

Screenshot of a sample single Post:

single-post-featured-image-left-genesis

References:

http://codex.wordpress.org/Function_Reference/get_categories

http://codex.wordpress.org/Function_Reference/category_description

http://www.billerickson.net/genesis-portfolio/

Images from http://commons.wikimedia.org/wiki/Commons:Featured_pictures/Food_and_drink.

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 571 other subscribers

Donate

Found this article helpful?

Comments

  1. Bob Roman says

    Is that possible to show the above as a widget on the Hompeage? Something like “home top” let’s say…

Trackbacks

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>