Posts Grid on Archives in Genesis

In this article I show how Posts can be displayed in columns on archives and Posts page in Genesis. For each entry, published date will appear at the top left . Categories and Tags (if present) will appear near the bottom when the featured image is hovered. We shall use matchHeight jQuery to make all the entries in each row have the same height (as the tallest in that row).

When the image of an entry is hovered:

and if an entry has Tags:

If an entry does not have a featured image, we shall show a default image:

From 1024px and below entry meta (categories and tags) will appear below the featured image:

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Summary of solution:

• Register new image size for featured images on Posts grid.
• Use pre_get_posts action hook to change Posts Per Page for Posts page and Archives.
• Use template_include filter to make the Posts page use archive.php.
• Write two custom functions that return unlinked comma separated category names and tags.
• Create archive.php having the code to add a custom body CSS class, load + initialize matchHeight, display entries in columns, force full width content, display published date + image (featured if there's one, otherwise a hardcoded one from the theme's images directory) + entry meta all linked to permalink.
• Write CSS to position the published date at top left and entry meta near the bottom (with opacity set to 0). We shall change the opacity to 1 when the image is hovered while using a linear transition.

Step 1

Upload jquery.matchHeight-min.js to child theme's js directory (create if not existing).

Create a file named say, matchheight-init.js in the same location having: