Sridhar Katakam

Genesis and WordPress Tutorials

Category images Grid Template in Genesis

by 21 Comments

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

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:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

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

    Reply

    • Use the page template (create page, choose “Catagories Grid” template) then use the Genesis featured Page widget and select that page.

      Reply

  • This has been the closest I’ve found to what I’m trying to do but not quite. I was looking simply for what you have in Step 6. The only problem I had was that in addition to showing me the featured image and title it was showing excerpts from my post. Is there anyway to increase the size of the image and nix the excerpt?

    I currently am using the Lifestyle Theme on Genesis and am using the Genesis Featured Widget Amplified for my home page and not sure if that is over writing what I’m trying to do on the category page?

    Thank you for your help!

    Reply

  • Hi Sridhar,
    We recently switched to Genesis and have tried your implementation and it totally hosed our site – nothing worked. Do you have any advice on how we can make it work? Please send me an email directly to [email protected] and hopefully you can help us. Thanks!

    Reply

  • Hi Sridhar,

    is it possible to create two or more category pages where you can specify which categories go to which page?

    Thanks.
    Victor

    Reply

  • I am able to set it up the way you described. As soon as I assign the new page to be the home page or static page, it goes blank. Have you checked to see if changes need to be made with updated WordPress versions (currently 4.3.1) or if it’s possible to work as the front page?

    Reply

    • Try the following:

      1) Place the code from Step 3 in a file named front-page.php instead of as page_categories_grid.php.

      2) Instead of Step 4 do this: Create a blank Page named, say Home. Go to Settings > Reading and set it as Front page. http://d.pr/i/1lPov

      Ensure that category image has been set for at least one of the top level categories.

      Reply

  • Hi Sridhar,

    If I use Child categories, the featured images do not display.

    Is it possible to pull the child categories so that either you could drill down from the parent category then select a child category then see posts in the child category or have the posts in Child Categories display in the parent category?

    Reply

    • I am interested in that as well for a food blog I am working on, and know just enough PHP and Genesis to be dangerous! 🙂

      Reply

      • I figured it out this far. You have to change this ilne (aorund line 45 in Sridhar’s example):
        ‘$args = array(
        ‘orderby’ => ‘name’,
        ‘parent’ => 0
        );’

        to:
        ‘$args = array(
        ‘orderby’ => ‘name’,
        ‘child’ => 0
        );’

        Then you get second-level categories. See what I’ve done here: https://diabetic.kitchen/category-index/

        Reply

  • Hi Sridhar, I would like to add this as a second loop to a static front page, after the default loop. Can you please tell me how to modify this? Thanks!

    Reply

      • Tested and working in Genesis Sample 2.6.0:

        Instead of steps 3 and 4, create a file named front-page.php having the following:

        <?php

add_action( 'genesis_entry_content', 'sk_add_categories_grid' );
/**
 * Outputs a grid of category images.
 */
function sk_add_categories_grid() {

    $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 »</a>';

            echo '</div>';

            $i++;
        }
    }

}

genesis();

        Then in the code being added to style.css, replace .categories-grid with .home.

        Reply
    • >