Add a masonry blog to WordPress

By February 3, 2015 Code, Web Build No Comments

So you have seen the fancy shmancy “Masonry blog” blog pages used on many modern WordPress sites and thought, that would look great on my site… Well here’s how to add a masonry blog to WordPress without any plugins:

Step 1: Enqueue the right files.

May be you did not know, but most masonry blogs use a JS library called, surprisingly, “masonry.js” and WordPress ships with a minified version of this lib. This can be found in the includes dir /js.

So the first thing to do is enqueue this file into the WordPress footer by placing the following code into your functions.php:

Notice we also called functions.js. This is where we will give the masonry.js lib it’s parameters.

Step 2: Set up the blog.

This next step may vary depending on how your particular blog is set up, but in general most modern blogs have an index page that looks something like this:

Note the call to: get_template_part( ‘content’, ‘masonry’ ), we also need to add a class to this file, like so:

Step 3: Set up the jQuery

OK, with our blog set up we now need to create a jQuery function to tell the masonry lib where to do it’s magic.

Note we set up the script to execute on a: $(window).load(function()… As we want all the images etc to be loaded before the posts are moved round.

That’s it! You now have a masonry blog, all that’s left is to do a little CSS to set the spaces between the “bricks” to your liking.

Leave a Reply