jQuery Masonry on a Custom Template.

main_page.php

<?php

/**
 * The idea (advanced version) of using Masonry in WordPress was taken from Sridhar Katakam's blog post (Link Below).
 * Here we are applying the idea in a different way. In this specific scene, we only need the Masonry goodness on Main Page.
 * Link - http://sridharkatakam.com/using-masonry-genesis-pinterest-like-layout/
 * 
 * NOTE: Here we did not use Masonry Brick for Image and CSS, as done in Sridhar's Tutorial. As, we already done some css
 * work for .entry and gave it a fixed width; and images in this scene were not featured images or images directly fom post.
 * 
 * Refer to Sridhar's Tut before procedding for a better view.'
 */
 
 /*The following goes into functions.php after making the .js file (as explained in Sridhar's tutorial).
 */
 
 //* Enqueue and initialize jQuery Masonry script
function sk_masonry_script() {
	if ( is_page_template('main-page.php') ) {
 
		wp_enqueue_script( 'masonry-init', get_stylesheet_directory_uri().'/js/masonry-init.js' , array( 'jquery-masonry' ), '1.0', true );

    }
}

//* Add custom body class to the head
add_filter( 'body_class', 'sk_body_class' );
function sk_body_class( $classes ) {
	if ( is_page_template('main-page.php') )
		$classes[] = 'masonry-page';
		return $classes;
}

/*****
 * Following code goes in main_page.php that we will be using for our front landing page.
 * /
 
 ?>
 
<?php
/*
Template Name: Main Page
*/

get_header();

add_action( 'wp_enqueue_scripts', 'sk_masonry_script' );


//* Display Post thumbnail, Post title, Post content/excerpt, Post info and Post meta in masonry brick
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
remove_action( 'genesis_entry_content', 'genesis_do_post_content_nav', 12 );
remove_action( 'genesis_entry_content', 'genesis_do_post_permalink', 14 );
		
do_action( 'genesis_before_content_sidebar_wrap' );

genesis_markup( array(
	'html5'   => '<div %s>',
	'xhtml'   => '<div id="content-sidebar-wrap">',
	'context' => 'content-sidebar-wrap',
) );

do_action( 'genesis_before_content' );

genesis_markup( array(
	'html5'   => '<main %s>',
	'xhtml'   => '<div id="content" class="hfeed">',
	'context' => 'content',
) );
	
do_action( 'genesis_before_loop' );

$args = array(
   
   //mention your arg statements
);

query_posts($args);

global $post;

if ( have_posts() ) : 
	while ( have_posts() ) : the_post();

		do_action( 'genesis_before_entry' );
		
		printf( '<article %s>', genesis_attr( 'entry' ) );
		
			//go mad, do whatever you want with the posts.
		
		echo '</article>';

		do_action( 'genesis_after_entry' );

	endwhile; //* end of one post
	do_action( 'genesis_after_endwhile' );

else : //* if no posts exist
do_action( 'genesis_loop_else' );

endif; //* end loop

do_action( 'genesis_after_loop' );

genesis_markup( array(
	'html5' => '</main>', //* end .content
	'xhtml' => '</div>', //* end #content
) );

do_action( 'genesis_after_content' );

echo '</div>'; //* end .content-sidebar-wrap or #content-sidebar-wrap

do_action( 'genesis_after_content_sidebar_wrap' );

get_footer();

?>