When it comes to setting up a site for creatives or a blog page, users across the world utilize the WordPress platform to accomplish such an objective. WordPress has now evolved and become a full-fledged CMS, and it also touted to be the best option for putting up a blog.

Remember that even creating a well-designed layout for your site or blog page using the popular WordPress platform might not help you get the expected results. Put it simply, you need to focus on making your website design look interactive and engaging to the viewer’s eyes, so as to boost traffic. And one best way to do so is to use the masonry layout for displaying items in your WordPress site or blog posts.

Still can’t get what exactly a masonry layout is, then head towards ‘Pinterest’ website, since this site features a masonry layout. The Pinterest page contains a grid style layout, wherein everything is arranged vertically, covering up all of the available space (as shown in the screen shot below). The Pinterest-style grid display, in fact, is becoming quite popular among WordPress blog owners.

And so, you can apply the Pinterest-grid style to a WordPress site/blog using the masonry layout.

In this post, I’ll run you through some steps as to how you can make your WordPress site or blog feature a Pinterest-like grid style (i.e. cascading grid layouts). For this purpose, I will make use of the popular Masonry JavaScript Library. But, let’s first have a brief introduction of the masonry layout in WordPress.

An Overview of Masonry Layout in WordPress

With the release of WordPress version 3.5, jQuery Masonry (a JavaScript grid layout library) was introduced for improving the display of custom headers in any WordPress design layout. This library helps place elements in a design in the right position on the basis of available vertical space, just like a mason fit bricks in a wall. Let’s have a look at the places, where the Masonry layout can be applied:

• Blog Posts: A WordPress blog post, in general, consists of a list of posts along with a brief summary. You won’t find any issue in using one single for displaying the lists of your posts, however, with multiple columns listing your all your posts with a summary can make your blog page look too messy. If that’s the case, then you’ll need to maintain consistency in your blog layout, by putting a limit on the length of the summary of each post. You can achieve such an objective with the help of Masonry layout.
• Image Galleries: The second most recommended use of Masonry layouts is in image galleries. As you just know, image gallery in any WordPress site comes loaded with plenty of images having different dimensions. And thus, creating an image set with same dimensions, without putting any impact on their quality can be challenging. But thanks to Masonry layouts, you can create image galleries with varying dimensions.

Step-by-Step Guide to Use Masonry in WordPress

Let us now talk about the steps, following which will help you guide in applying Pinterest-like grid style to your WordPress theme layout using Masonry.

Step 1 – Loading The Appropriate Script In Your WP Theme

The very first thing, you’ll need to do for applying the masonry layout to your WordPress theme is to write code that helps in loading important scripts. In our case, a script named “script.js” will be loaded. For this, you just need to add the below code snippet in your theme’s functions.php file:

<?php

//Latest version of WordPress already includes Masonry we just have to call it in our function.php file//code for functions.php file

function header_js_scripts(){

if ($GLOBALS[‘pagenow’] != ‘wp-login.php’ && !is_admin()){

wp_enqueue_script(‘jquery’);

wp_enqueue_script(‘masonry’);

wp_enqueue_script(‘scripts’, get_template_directory_uri().’/js/scripts.js’, array(), ‘1.0.0’);

}

}

add_action(‘init’, ‘header_js_scripts’);

function site_styles(){

wp_enqueue_style(‘masonry’, get_template_directory_uri().’/css/masonry.css’, array(), ‘1.0.0’);

}

add_action(‘wp_enqueue_scripts’, ‘site_styles’);

?>

Step 2 – Setting Up the Grid

In the next step, we’ll define the code for the script file that we’ve created in the above step. It will help in setting up the Masonry structure (i.e. grid). Furthermore, the script will define the containers for each of your post. Below is the code that will help setup the Masonry and needs to be added in script.js:

//set the container that Masonry will be inside of in a var

var cont = document.querySelector(‘#masonry-loop’);

var mason;

// initialize Masonry after all images have loaded

imagesLoaded( container, function() {

mason = new Masonry( cont, {

itemSelector: ‘.masonry-entry’

});

});

The above script tells Masonry to search within the container containing an id “masonry-loop” defined for items, along with the “masonry-entry” class. And then, and to calculate the size of the items to be displayed on the grid once all the images are loaded.

Step 3 – Defining The Structure of Individual Masonry Items

Now, since you’ve created the container, it is time to define the structure of individual entries (i.e. Masonry items) using the following code:

<article class=”masonry-entry” id=”post-<?php the_ID(); ?>”>

<?php if ( has_post_thumbnail() ) : ?>

<div class=”post-thumb”>

<a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><?php the_post_thumbnail(‘post-thumb’); ?></a>

</div>

<?php endif; ?>

<div class=”post-details”>

<h3><a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h3>

<div class=”post-excerpt”>

<?php the_excerpt(); ?>

</div>

</div>

</article>

Step 4 – Setting Up Masonry Layout To Your Template

Once you’ve chosen the template to which you want to add the grid-style layout, you will have to include that template in your theme. For doing so, simply add the below code to the index.php file:

<?php if ( have_posts() ) : ?>

<div id=”masonry-loop”>

<?php while ( have_posts() ) : the_post(); ?>

<article class=”masonry-entry” id=”post-<?php the_ID(); ?>”>

<?php if ( has_post_thumbnail() ) : ?>

<div class=”post-thumb”>

<a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><?php the_post_thumbnail(‘post-thumb’); ?></a>

</div>

<?php endif; ?>

<div class=”post-details”>

<h3><a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h3>

<div class=”post-excerpt”>

<?php the_excerpt(); ?>

</div>

</div>

</article>

<?php endwhile; ?>

</div><!–#</div>–>

<?php else : ?>

<div class=”post-details”>

<h3>No Post Found.</h3>

</div>

<?php endif; ?>

Conclusion

That’s it! Hope that reading this post will give you a fair idea of how using Masonry, you can apply the grid layout (such as Pinterest-style grid) to your WordPress theme.