Masonry Grid on Content Archives with Title and Excerpt on Hover in Genesis

Updated on Feb 21, 2019

This is an updated and improved version of Masonry Grid on Category Archives with Title and Excerpt on Hover in Genesis tutorial.

This tutorial provides the steps to put together a custom template part for content archives in which all actions from Genesis entry hooks are replaced with a custom one to output image and title + excerpt overlay - all linked to the post's permalink. We shall load Masonry which comes built-in with WordPress, initialize it and add the CSS needed to display the entries in 3 columns.

As the screen width reduces we will set these to show up 2 columns (between 561px and 959px) and eventually one below the other (560px and below). Finally, we load the template part on Posts page and archives.

Also, from 1366px (iPad Pro landscape width) and below we are going to set the title and excerpt to appear below the image because hover action does not make sense for tablets and mobiles.

Sample screenshots follow.

Desktop:

With an entry hovered:

Tablet:

Mobile:

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

Step 1

If not already present, set featured images for your posts that are at least 500px wide.

For seeing the entries in masonry effect, it is recommended to use images of different heights.

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

// Registers a custom image size for image thumbs on content archives.
add_image_size( 'content-archive-thumb', 500, 0, true );

Regenerate thumbnails.

Step 2

Create a file named say, masonry-init.js in child theme's js directory having the following: