Masonry and Infinite scroll with Genesis

I’ve published a Premium Genesis child theme called Plastic Pro with a masonry layout with infinite scroll. I thought it might be a good idea to write a quick tutorial about it. So here we go!

I’ve tested this with my own Genesis basic theme and with the Genesis Framework sample theme. In both cases it worked fine so there is no reason this shouldn’t work with other Genesis themes.

With the inclusion of jQuery masonry in the WordPress 3.5 core library, it’s very easy to change a template’s layout into a masonry layout. But what is exactly a masonry layout?

A masonry layout resembles a brick wall. The posts or images are the bricks in the wall. Curious about an example? Here you find a screenshot of the Plastic theme I’m working on.

Step 1 Create a page template

Before we can start building our masonry we need to create a new page template and load the appropriate scripts. Add the following code to the new file and save it as masonry-scroll.php. If you’re lazy you can grap the whole template at once, just scroll down.

Step 2 Download and set the scripts

To get everything to work we need to download the following script and place this in your child theme directory in a subdirectory with the name js.

• infinitescroll

In the subdirectory js we subsequently create two new files. The first is init-masonry.js. Add the following code to this file.

The second file is masonry-isotope.js Add the following code to this file.

Step 3 Add custom class to posts

Add the following code to the file we’ve created in step 1. With this snippet we add a new class (.brick) to the posts on this page.

Step 4 Create the loop

Additionally, add the following code to the file we’ve created in step 1.

In this example I’ve set the post per page at 6. Change this to your liking.

Step 5 Add infinite scroll

Now, it’s time to add some magic. Add the following code beneath the loop.

Step 6 Build the page

Finally, Genesis need to build the page. Add the following code at the bottom of the page template we’ve created.

Final Step Create some CSS and set the page

Without any CSS the masonry layout isn’t very pretty yet. Let’s add some basic CSS to create the bricks and hide the navigation at the bottom of the page. Finally, to make it work, create a new page in WordPress and set the page template to Masonry Grid Scroll.

Download full page template here

Final Words

I hope this article is useful for Genesis developers or users wanting to use masonry and infinite scroll with Genesis. When I was writing this tutorial it looked quite simple. However, it did take me some time to figure it all out. This tutorial hopefully saved you some time. Any suggestions or (positive) feedback? Leave a comment and follow me on Twitter for more tutorials in the near future.