Add Masonry Effect to Genesis Blog

Previously I did a tutorial on applying the jQuery Masonry effect to Thesis teasers and figured I would also outline the steps to do the same with a Genesis theme. It’s a bit trickier with Genesis as it doesn’t have a built in option for the grid layout and it has out of the box responsiveness. That being said, this technique should work with all the layouts and sizes- however you may want to tune the settings to work better with your personal site.

What is jQuery Masonry?

Taken straight from the site:

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

To give you an even better idea, check out Blink, a Genesis theme I created for Themedy using the Masonry effect. Re-size the browser to different widths and you will see the magic in action.

Getting Started: Create a Child Theme

The easiest way to get a child theme up and running quickly would be to go here and download the sample child theme. Upload that folder to your themes folder (/wp-content/themes) and enable it.

Download the Code

With your child theme set up, you’ll now need to download the jQuery script and move it to your site.

Download it here and move it to a new folder in your Genesis child theme location, called js. Make sure the file has the .js extension and not a .txt or .htm extension.

Set up the Grid and Hook the Script

Create a home.php file and upload that to your child theme folder. Open it up and add the following PHP code:

<?php
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'child_grid_loop_helper' );
/** Add support for Genesis Grid Loop **/
function child_grid_loop_helper() {
    if ( function_exists( 'genesis_grid_loop' ) ) {
        genesis_grid_loop( array(
            'features' => 0,
            'feature_image_size' => 0,
            'feature_image_class' => 'alignleft post-image',
            'feature_content_limit' => 0,
            'grid_image_class' => 'alignleft post-image',
            'grid_content_limit' => 0,
            'more' => __( '[Continue reading...]', 'genesis' ),
            'posts_per_page' => 10,
        ) );
    } else {
        genesis_standard_loop();
    }
}

/** Remove the post meta function for front page only **/
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

/** Add Masonry Scripts **/
add_filter('genesis_footer_scripts', 'masonry_scripts');
function masonry_scripts() { 
	wp_enqueue_script('masonry', CHILD_URL.'/js/jquery.masonry.min.js', array('jquery'), '2.1.05', TRUE);
	?>
	<script type="text/javascript" charset="utf-8">
		jQuery(window).load(function() {
		  jQuery('#content').masonry({
			// options
			itemSelector : '.hentry',
			isAnimated: true,
			columnWidth : 1
		  });
		});
	/script>
	<?php
}

genesis();

Style the Grid

You laid the foundation, but we still have to style the teasers. Open up style.css in your child theme folder and add this bit of code at the very bottom:

/* Masonry Effect
------------------------------------------------------------ */

.genesis-grid-even,
.genesis-grid-odd {
	margin: 0 0 20px;
	padding: 0 0 15px;
	width: 44%;
}

.genesis-grid-even {
	float: left;
}

.genesis-grid-odd {
	clear: none;
	float: left;
	margin-right: 3%;
}

.navigation {
	position: absolute;
	bottom: 0;
	padding: 0;
}

.home #inner #content {
	padding-bottom: 30px;
}

Check that Bad Boy Out!

Click above for a larger shot.

You should now have styled teasers that stack up nicely due to the Masonry effect! Also, you should see some nice effects when re-sizing your browser due to the built-in responsiveness of Genesis.

It doesn’t end here though- the Masonry plugin is very powerful and can do much, much more. Check out the documents and demos to see the full effect of Masonry.