gistfile1.txt

<?php
/**
 * The template for the "blog" page
 *
 * Template Name: Blog
 *
 */
get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <div class="inner-row">
            <header class="entry-header">
                <h1 class="entry-title">masonry/ajax loader test</h1>
            </header>


            <?php
            $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
            $args = array(
                'posts_per_page' => 5,
                'paged' => $paged
            ) ;
            $wp_query = new WP_Query($args) ;    ?>

            <?php if ($wp_query->have_posts()) : ?>
                <div id="masonry-wrapper">
                    <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

                        <article class="m-item">
                            <h3><?php the_title()  ?></h3>
                            <p><?php  the_excerpt(); ?></p>
                            <p><a href="<?php echo get_permalink()  ?>">read more</a></p>
                        </article>
                    <?php endwhile; ?>

		    	    <?php echo do_shortcode('[ajax_load_more post_type="post" pause="true"]')  ?>
		    
                </div> <!-- ENDS #masonry-wrapper -->
            <?php endif; ?>	    
	    
            <br class="clear">
            <div id="sidebar" class="col span_3 col_last">
            </div><!--/span_3-->

        </div>  <!-- wtf -->

        <div class="inner-row pagination-container">
            <?php // wp_pagenavi( array('query'  => $wp_query)  )  ?>
        </div> <!-- ENDS .pagination-container -->


        <script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/masonry.pkgd.min.js"></script>

        <script type="text/javascript">
         jQuery(document).ready(function($){

             jQuery('#masonry-wrapper').masonry({
                 singleMode: true,
                 itemSelector: 'article'
             });
         });
        </script>


        <style>
	 #masonry-wrapper .m-item {
	   background-color #DDD ;
	   padding: 10px ;
	   border: 1px solid #000 ;
	   max-width: 150px ;
	 }	 
        </style>
	
</div>
    </main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>