In this tutorial, I’ll walk you through making a WordPress posts grid layout with the help of the Shapeshift script!

Before getting started, make sure you have a working WordPress install and a theme you can customize.
Next, download the Shapeshift script and place jquery.shapeshift.min.js in a ‘js’ folder under your theme root folder.

Ok, so we need to add some CSS styles required by Shapeshift. If you’re running a Genesis child theme, then you can use these:

.blog.js #content,
.archive.js #content{
position: relative; /* shapeshift jquery plugin requires this */
}

.blog.js #content .post,
.archive.js #content .post{
position: absolute;
width: 165px; /* width in rems or px is fine. percentages not so good, even for responsive */
}

.blog .navigation{
clear: both;
}


Otherwise, check out the guide and adapt it to your theme markup.

After the CSS, let’s add the necessary Javascript to trigger Shapeshift. Create a new Javascript file in the same folder as Shapeshift, and add this code into it. You’ll notice I disabled drag and drop as it doesn’t really make sense to me to keep it on a blog, but feel free to set it to true

You may have noticed I added a .js class to body, this is because if Javascript is disabled, then the styles won’t apply and the layout will fallback to a default layout. Without that, it would look broken.

The next step is to load the Shapeshift script and our custom script with the theme:

Because of the relative positioning, the pagination gets positioned at the top of the page, so let’s move that out of #content.

Another solution for Genesis is to use the Grid Loop plugin by Bill Erickson, the difference is that this script allows for different heights for the posts. With Shapeshift, if you’re displaying the featured image on the blog page, then you could set the thumbnail height to 9999, then use Regenerate thumbnails plugin. Now, your featured images can have different heights, making the layout more interesting.

This would probably work well for a gallery too.