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.

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 378 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…

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>