Masonry Blog Layout

Personally I feel that the masonry blog layout is a bit over-used these days but for a portfolio or photography site it serves a definite purpose. A masonry layout is a nice way of overcoming the problems caused by the different size images, e.g. portrait and landscape.

Let me show you the final product of what I am about to show you:

So just how do we do this?

Javascript

We are going to need two scripts to make this work. The first is the Masonry script built into the WordPress core. The second is a small initialisation script to set the options required for the masonry layout.

You need a file called masonry-init.js in the directory your theme uses for JavaScript files.

jQuery( window ).load( function() {
	var container = document.querySelector( '#ms-container' );
	var msnry = new Masonry( container, {
		itemSelector: '.ms-item',
		columnWidth: '.ms-item',
		horizontalOrder: true,
		gutter: '.ms-gutter-size',
		transitionDuration: '0.2s',
		percentPosition: true,
	} );
} );

Enqueue Files

Now we need to enqueue the file we have just added as well as the masonry script included in core.

if ( ! function_exists( 'your_domain_scripts' ) ) {
	/**
	 * Enqueue scripts and styles.
	 */
	function your_domain_scripts() {
		wp_enqueue_script( 'jquery-masonry' );
		wp_enqueue_script( 'isithombe-masonry-init', get_template_directory_uri() . '/js/masonry-init.js', array( 'jquery' ), 'null', true );
		
	}
	add_action( 'wp_enqueue_scripts', 'your_domain_scripts' );
}

Please change the your_domain bits to your theme’s real domain name. You might also have to change the directory for the Javascript files.

index.php

The template file that calls the main WordPress loop (in which we now want to change the layout to masonry) is index.php. You need to change the code in this template somewhat.

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage your_domain
 * @since 1.0
 * @version 1.0
 */

get_header();
?>

	<div id="primary" class="content-area-wide">	

	<main id="main" class="site-main" role="main">

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

			<div id="ms-container" class="ms-container">

				<?php if ( is_home() && ! is_front_page() ) { ?>
					<header role="banner">
						<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
					</header>
				<?php } ?>

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

						<?php get_template_part( 'template-parts/content', 'masonry' );?>

				<?php } ?>

			</div><!-- .ms-container -->

		<?php } else { ?>

			<?php get_template_part( 'template-parts/content', 'none' );?>

		<?php } ?>

		<?php get_template_part( 'partials/dry', 'posts-navigation' );?>

	</main><!-- #main -->

</div><!-- #primary -->

<?php get_footer();

There are a couple of things to take note of in this code:

  • You need to change the your_domain bits to your themes’ real domain name.
  • The code partial I am using to call the posts navigation is how I do things, your code will be something different.
  • The code calls a file called content-masonry.php which you will not have. We are going to create this file in the next step.
  • The only real difference between this and a standard index.php is the loop which now has a wrapper called ms-container around it.

content-masonry.php

In my themes I need a file called content-masonry.php for a masonry layout. I cannot change the file content.php file directly because I need that file for displaying my archive pages.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	
	<div class="ms-item">

		<?php //add your featured image here ?>

		<div class="bottom-holder">

			<?php // Post title, date posted, author, categories, tags, content etc. comes in here. ?>

		</div><!-- .bottom-holder -->
		
	</div><!-- .ms-item -->
	
	<div class="ms-gutter-size"></div><!-- Needed to set gutter-size in % -->
	
</article><!-- #post-<?php the_ID(); ?> -->

The code here is a lot different from a standard content.php file. Here you will find all the classes we added to our masonry script. The empty ms-gutter-size class added at the end is necessary, without this nothing will work.

Styling

We are almost there, all we need now is a touch of styling.

.ms-container
{
    overflow: hidden;

    width: 100%;
}

.ms-item
{
    width: 100%;
    margin: 0 0 5% 0;
    padding: 0;

    border: none;
}

.ms-item .entry-meta
{
    text-align: center;
}

.ms-item .entry-title
{
    text-align: center;
}

.ms-item .bottom-holder
{
    overflow: hidden;

    width: 100%;
}

@media screen and (min-width: 48.9375em)
{
    .ms-item
    {
        width: 30%;
        padding: 0;

        border: none;
    }

    .ms-gutter-size
    {
        width: 5%;
    }
}

Please change the width of the media query should this be required.

That’s it, that’s all it takes. Enjoy your masonry layout.

Thanks for visiting.

Arnold.

Start the Conversation

Your e-mail address will not be published. Required fields are marked *


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.