Add a masonry blog to WordPress

Masonry post display

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.

Maybe 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:

//masonry blog
function mason_script() {
    wp_enqueue_script('jquery_masonry', includes_url(). 'js/masonry.min.js', array( 'jquery' ), true);
   //This is a call to a further js file we will need later
    wp_enqueue_script('function-js', get_template_directory_uri(). '/functions.js', array( 'jquery' ), true);
    
}
add_action( 'wp_enqueue_scripts', 'mason_script' );

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:

<?php get_header(); ?>

<div class="container">
	<div id="content_full" >
	
    <?php if ( have_posts() ) : ?>
     <!--The holding div-->
      <div id="masonry-loop">
       <!-- The loop -->
       <?php while ( have_posts() ) : the_post(); ?>
        <!--The post excerpt-->
        <?php get_template_part( 'content', 'masonry' )?>
      <?php endwhile; ?>
     </div><!--Close masonry-loop-->
    <!--pagination here-->
  <?php else : ?>
    <!--If no posts-->
    <?php get_template_part( 'content', 'none' ); ?>
  <?php endif; ?>
			
	</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>

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

<!--we add our class here-->
<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
 <div class="masonry-inner">
  <?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium'); ?></a>
    </div><!--.masonry-thumbnail-->
  <?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title">        <?php the_title(); ?></span></a></h5>
        <hr />
        <?php the_date('d m Y', '<div class="masonry-date">Posted: ', '</div>'); ?>
        <div class="masonry-post-excerpt">
            <?php echo the_excerpt();?> <a href="<?php echo get_the_permalink(); ?>"  target="_self" >read&nbsp;on</a>
        </div><!--.masonry-post-excerpt-->
    </div><!--/.masonry-entry-details --> 
    </div> 
</article><!--/.masonry-entry-->

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.

	$(window).load(function(){
		if ($("#masonry-loop")[0]){ 
			//set the container that Masonry will be inside of in a var
			var container = document.querySelector('#masonry-loop');
			//create empty var msnry
			var msnry;
			// initialize Masonry after all images have loaded
			imagesLoaded( container, function() {
				msnry = new Masonry( container, {
					itemSelector: '.masonry-entry'
				});
			});
		}
	});

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.