WordPress Black Friday & Cyber Monday Deals 2021
Days
Hours
Minutes
Seconds

A Handy Guide on Using Masonry to Add Grid Layouts in Your WordPress Site

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.

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.

11

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.

Alyona Galea
Alyona Galea
Alyona is a WordPress enthusiast, focused on sharing interesting things she comes across during her work with this great CMS. She loves exploring new destinations and maintains a travel blog at www.alyonatravels.com

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

Our Sponsors
Solid Affiliate
Contents

4 Responses

  1. Hi Juana!
    Thank you for this post, but I didn’t manage to set up masonry correctly. Isn’t there a mistake on the name of your script in first step?

    On the first step, you wrote this:
    wp_enqueue_script(‘scripts’, get_template_directory_uri().’/js/scripts.js’, array(), ‘1.0.0’);

    And according to the second step, the js file should be named “script.js” (singular).

    Nevertheless, no post are displayed on my front page.

  2. I prefer using isotope to masonry. The only benefit of using masonry is in it’s licensing. Masonry is under the MIT license, but Isotope is only free for personal use.

  3. Juana, I am attempting to add your code according to your instructions, but where does the code in Step 3 go? I want the posts on pages based on my index.html template to use the grid format.

Leave a Reply

Your email address will not be published. Required fields are marked *

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share tutorials and genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.