Do you want to add a masonry grid layout on the WordPress website? You have probably seen the masonry grid on most sites over the Internet. One of the examples using this kind of grid layout is Pinterest. In this article, I show you how to add a masonry grid layout to your WordPress website.

Using masonry, our HTML elements are placed based on available vertical space. It is useful because the HTML elements would do the best use of the screen. Plus, it adds a better user experience to your web pages.

WordPress comes with a few jQuery plugins in its core. Some of them are jQuery, jQuery UI, imgareaselect, thickbox, etc. It also ships with this built-in masonry plugin. To use this masonry you can enqueue its JS file from the WordPress core to the theme.

If you are curious about the path of this masonry JS then you will find it at ‘/wp-include/js/masonry.min.js’.

So without further discussion, let’s take a look at how to add a masonry grid layout in WordPress.

Enqueue Masonry JS File

When it comes to WordPress, one should not include JS files using the script tag directly. It’s a bad practice for WordPress. WordPress provides its own way to include JS and CSS files in the website. You must include the JS and CSS files in the same way.

Open the functions.php file and place the below code in it which adds the JS files to your website.

add_action( 'wp_enqueue_scripts', 'site_scripts' );
 
function site_scripts() {
    wp_enqueue_script('masonry');
    wp_enqueue_script( 'site-js', get_stylesheet_directory_uri() . '/js/script.js', array(), false, true );
}

Here, I have included a masonry js from the WordPress core using the statement wp_enqueue_script('masonry');. This statement includes a JS file of masonry directly into your WordPress environment. I also included a script.js file, where I will write the code to call and initialize the masonry grid layout.

Masonry Grid Layout in WordPress

At this stage, we are done with the basic setup required for masonry grid integration. Next, we need to add markup for our HTML elements in the grid container. Use the below HTML for it.

<div class="grid">
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-1.jpg'; ?>">
    </div>
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-2.jpg'; ?>">
    </div>
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-3.jpg'; ?>">
    </div>
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-4.jpg'; ?>">
    </div>
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-5.jpg'; ?>">
    </div>
</div>

In the above code, I added one main grid container and wrapped the images inside it. I am adding an image to each grid-item container.

After this, set the width for grid items using the below CSS rule. You can change this width matching with your requirement.

.grid-item { width: 400px; }

Finally, we need to initialize masonry with the methods provided by a masonry plugin. Open the script.js file and paste the below code in it.

jQuery(function($) {
    // init Masonry
    var $grid = $('.grid').masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: 400
    });
    // layout Masonry after each image loads
    $grid.imagesLoaded().progress( function() {
        $grid.masonry('layout');
    });
});

The final output will look something like below screenshot:

That’s it! It’s all about adding a masonry grid layout to your WordPress website. Try it in your WordPress project and share your thoughts and suggestions in the comment section below.

Related Articles

• How to Build Custom Elementor Widget
• How to Add Code After the Body Tag in WordPress
• Adding Custom Image Button with Media Uploader in WordPress

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.