Using jQuery Masonry for Pinterest-Like Posting

With the inclusion of jQuery Masonry in the WordPress 3.5 core library, it’s never been easier to change up a template’s layout for recent posting.

---

Serving up your content in a masonry layout can make the blog portion of your website more visually interesting for your readers. With jQuery Masonry, it doesn’t matter the length of your post excerpt (within reason of course), it will adjust to fill every bit of space. This tutorial is going to explore the idea behind using the newly included jQuery Masonry library with WordPres 3.5.

---

What Is a Masonry Layout?

If you’ve heard of a “masonry” wall (think of a brick wall), then you have a pretty good mental image of what a masonry layout on your website might look like. If you’re still confused, visit Pinterest and check out how they’ve laid out each “pin” on their website. Everything is arranged vertically, filling up all available space. It’s important to note the term “vertical” in that last sentence. You can achieve the same type of masonry effect using CSS floats, but you might run into spacing issues. This happens because, unlike jQuery Masonry, CSS floats will arrange elements horizontally first, then vertically. This can make for very inconsistent and sometimes unwanted gaps of space in your layout. Using jQuery Masonry can help solve this problem.

CSS Float Example

jQuery Masonry Example

Now that we know what a Masonry layout is, let’s get started creating a simple, jQuery Masonry layout for our recent posts.

---

Step 1 Using wp_enqueue_script to Load the Library

Before we can start building our wall we need to load the appropriate script. You’ll need to add the following code to your functions.php file.

	function mason_script() {
		wp_enqueue_script( 'jquery-masonry' );
	}
	add_action( 'wp_enqueue_scripts', 'mason_script' );

---

Step 2 Setting Up the Grid

For my basic masonry structure, I’m going to implement the following HTML into my loop (or custom template – wherever you plan to build your wall). First, I’m going to set the container for the masonry wall and then setup the container for each post within the wall.

	<div id="container">
		<!-- start your query before the .brick element -->
		<div class="brick">
			<!-- Post Content -->
		</div>
		<!-- end query-->
	</div>

Setting Up Your CSS

You’ll need to define your container width and post width to achieve the actual masonry effect. For my demo, I’ve set my container to 960 pixels wide and I want to have 4 columns of posts. So, I need to do some simple math to find what size width each post on my wall should be.

Brick width = 960px / 4 posts = 240 pixels each.

With that number in mind, I can set my layout up in my stylesheet:

	#container {
		width:		960px; // width of the entire container for the wall
	}

	.brick {
		width:		220px; // width of each brick less the padding inbetween
		padding:	0px 10px 15px 10px;
	}

---

Step 3 Setup the Function

Next, we need to setup the masonry function so that our div containers all mesh together in the wall. Use the following code to do this:

	jQuery( document ).ready( function( $ ) {
		$( '#container' ).masonry( { columnWidth: 220 } );
	} );

---

Conclusion

Masonry comes with a lot of built-in options that make it very appealing to use with WordPress. For example, you could apply the animation option to “animate” your post arrangements, append additional items to the wall (great for portfolio layouts), or incorporate it with Paul Irish’s Infinte Scroll. Regardless of how you plan to use the jQuery Masonry script, it’s a welcome addition to WordPress 3.5.