Add masonry in WordPress

Would you like to know how to use Masonry in WordPress? This article will show you the basics of getting it set up in your development project. The best thing about using Masonry in WordPress is that it is actually built into the core of WordPress. So we don’t actually have to do very much work to get it working. Good thinking WordPress!

Let’s Add Masonry In WordPress

The first thing we should start with is telling WordPress that you want to pull Masonry out of the core install and actually use it. This is done by enqueuing it in the functions.php file of your theme. Whether you are building a theme from scratch or customizing a free/premium them, open up the functions.php file and find where the stylesheets and javascript files are being enqueued. This can be in many places so dig around and hopefully the theme author will have used good commenting practices so you can easily find it. Once you do find the area, check to see if the theme you are using is already enqueuing it. It should look something like this:

// Pull Masonry from the core of WordPress
wp_enqueue_script( 'masonry' );

//Pull Masonry from a cdn
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js' );

If you find something like this in your theme, great! That means it is ready to be used. If not then you want to add one of the above lines of code into the area where the files are being enqueued. Copy and paste it in and then let’s move on.

Next we need to use a few lines of code to tell your theme what the name of the container that is surrounding the items that will use masonry and then what the item selector and column width will be. See the following code:

    <script type="text/javascript">
        
        jQuery(window).load(function() {
      var container = document.querySelector('#ms-container');
      var msnry = new Masonry( container, {
        itemSelector: '.ms-item',
        columnWidth: '.ms-item',                
      });  
      
        });

      
    </script>

Let’s walk through this a little. The spot that says document.querySelector and in parenthesis and single quotes reads #ms-container, you can change this to whatever id you want to use as a wrapper around your masonry content. We will do more with this later. This can be anything of your choosing, just remember what you named it so we can use it later. The next spot is where it says itemSelector and columnWidth. Here we will use the .ms-item to tell Masonry which items you want to use Masonry on and also, in the css, you will give it a width percentage so determine how many columns it will have.

Before we jump into the html and css, let’s determine where the above script needs to go. I typically like to put it in the footer.php file right before the closing body tag. This is only if the masonry is going to be used on every single page. If it will only be on the home page or the page that displays all of your blog posts then put it at the bottom of that template file instead so that it only runs if it is on a page that uses Masonry in WordPress.

Now we can jump into the html and css. This is an example of the home.php template file on a project that I worked on where I implemented Masonry in WordPress.

<?php get_header(); ?>

<div class="row" id="ms-container">
     
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                
    <div class="ms-item col-lg-6 col-md-6 col-sm-6 col-xs-12">
        
        <?php if (has_post_thumbnail()) : ?>
        
            <figure class="article-preview-image">
                
                <?php the_post_thumbnail('large'); ?>
                
            </figure>
        
        <?php else : ?>

        <?php endif; ?>
        
            <h2 class="post-title"><a href="<?php the_permalink(); ?>" class="post-title-link"><?php the_title(); ?></a></h2>
            
        <?php the_excerpt(); ?>
            
    <div class="clearfix"></div>
    
<a href="<?php the_permalink(); ?>" class="btn btn-green btn-block">Read More</a>

    <div class="clearfix"></div>
    
    </div>
                
    <?php endwhile;
                
    else : ?>

        <article class="no-posts">

            <h1><?php _e('No posts were found.'); ?></h1>

        </article>
    <?php endif; ?>
                    
                </div>
<div class="clearfix"></div>




    <script type="text/javascript">
        
        jQuery(window).load(function() {
      var container = document.querySelector('#ms-container');
      var msnry = new Masonry( container, {
        itemSelector: '.ms-item',
        columnWidth: '.ms-item',                
      });  
      
        });

      
    </script>
<?php get_footer(); ?>

The first thing to take note of is that we have a div with an id or #ms-container surrounding the loop. Make sure that this div starts before the loop and ends after the loop. Then the next thing to note is directly inside the loop is a div with the class of ms-item. You should recognize those from the script we wrote above. This div starts just inside the loop and ends just before the endwhile statement. Now everything inside of the div with the class of ms-item will become a Masonry item.

There are a few more things we need to understand. We told Masonry in the jQuery statement that we wanted the container around the Masonry items to be any div with the id of ms-container. Check. Next we said that any div with the class of ms-item would be a Masonry item. We declared that where it says itemSelector. Check. Now in the css we need to create this class ms-item and tell it to be a percentage in order to create columns. In your style.css file add this class and follow the following examples:

/* Makes two columns */
.ms-item {
width: 50%;
}

/* Makes three columns */
.ms-item {
width: 33%;
}

You may have to play with the percentages a bit to get the columns right because you might need or already have margin or padding in there which will make it look really weird if you don’t.

Congratulations! You just added Masonry in WordPress! If you have any additional questions or you see I missed something in this quick tutorial please don’t hesitate to leave me a comment. That’s right! You can now leave comments on all of my posts! Finally, right?