Sridhar Katakam

Genesis and WordPress Tutorials

Image Grid on Archives in Genesis

by 4 Comments

This tutorial provides the steps to display featured images of entries (posts) on archive pages in Genesis in a 3-column grid using CSS Grid with Flexbox fallback (for oldIE).

For entries that do not have a featured image set, the first attached image will be shown and if that's not present, a fallback image.

The number of columns will be set to change from 3 to 2 to 1 as the screen width is reduced.

The image will be linking to the corresponding permalink.

Archives = Category archives, tag archives, author archives, CPT archives, date archives, taxonomy archives etc. provided a more specific template is not present that will override archive.php.

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.

Step 1

Register a custom image size for the images to be shown in the grid archives.

Add the following in child theme's functions.php:

add_image_size( 'category-image', 600, 350, true );

Regenerate thumbnails.

Step 2

Create a file named archive.php in the child theme directory having the following:

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

Already a member? Log in below or here.

  • Thanks Sridhar! I did this tutorial using Enterprise Pro theme. I am trying to display all of the posts of my CPT team on one page (3 columns) so I can add FacetWP and filter by specific categories using the fSelect. Do you know why only 5 of my posts are displaying on a page?? Here is the URL https://www.staging.childrensresourcegroup.com/team/

    I added this to functions.php, but the default 5 are still showing:
    // Set the number of a custom post type posts per page
    add_action( ‘pre_get_posts’, ‘change_cpt_per_page’ );
    /**
    * Change Posts Per Page for Team Archive
    * @author Bill Erickson
    * @link http://www.billerickson.net/customize-the-wordpress-query/
    * @param object $query data
    */
    function change_cpt_per_page( $query ) {

    if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'team' ) ) {
    $query->set( 'posts_per_page', '18' );
    }

    }

    Reply

    • Hi Rita,

      I logged into your site and had a look at the code in functions.php.

      The problem was being caused by the closing brace for custom_soliloquy_output() being present in a wrong place (it was inside change_cpt_per_page()).

      I fixed it and now the number of posts on your team CPT archive page works as expected.

      I am working on the other changes you asked via email.

      Reply
    • >