askdesign
6/8/2016 - 8:05 PM

Masonry and Infinite Scroll with Genesisby

Masonry and Infinite Scroll with Genesis by wpstudio - March 31, 2015

/* --- Final Step Create some CSS and set the page --- */

/* --- Without any CSS the masonry layout isn’t very pretty yet. 
Let’s add some basic CSS to create the bricks and hide the navigation at the bottom of the page. 
Finally, to make it work, create a new page in WordPress and set the page template to Masonry Grid Scroll. --- */

/*  Masonry & Infinite scroll
--------------------------------------------- */
#container {
	margin-bottom: -1.875em; 
	margin-left: -1.562%; 
	overflow: hidden;
	padding-bottom: 160px;
    	position: relative;
    	width: 103.125%; 
}

#container .pagination {
	display: none;
}

.brick {
	background: #f8f9fa;
	float: left;
	font-size: 14px;
	margin: 0 1.515% 1.875em !important;
	padding: 3%;
    	width: 30.303%;  
}

#infscr-loading {
	bottom: 0;
	clear: both;
  	left:40%;
  	margin: 4em auto;
  	position: absolute;
  	right: 40%;
  	text-align: center;
  	width: 20%;
  	-webkit-animation-delay: -0.16s;
  	animation-delay: -0.16s;
}

// Step 5 Add infinite scroll

// Now, it’s time to add some magic. Add the following code beneath the loop.

// Add init infinite scroll
add_action( 'wp_footer', 'custom_infinite_scroll_js',100);
function custom_infinite_scroll_js() {
    ?>
    <script>
    var infinite_scroll = {
        loading: {
            msgText: "<?php _e( 'Loading the next set of posts...', 'plastic' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'plastic' ); ?>"
        },
        "nextSelector":".pagination-next a",
        "navSelector":".pagination",
        "itemSelector":".brick",
        "contentSelector":"#container",
        "behavior": "masonry"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    </script>
    <?php
}
// In the subdirectory js we subsequently create two new files. 
// The first is init-masonry.js. Add the following code to this file.

// Settings Masonary
jQuery( document ).ready( function( $ ) {
    $( '#container' ).masonry(  );
} );

Step 2 Download and set the scripts
To get everything to work we need to download the following script and 
place this in your child theme directory in a subdirectory with the name js:
infinite-scroll/jquery.infinitescroll.min.js 


<?php
/* Step 1 Create a page template
Before we can start building our masonry we need to create a new page template and load the appropriate scripts. 
Add the following code to the new file and save it as masonry-scroll.php. If you’re lazy you can grap the whole template at once, just scroll down.
*/

/*
https://www.wpstud.io/masonry-and-infinite-scroll-with-genesis/

Create a new page template and load the appropriate scripts. Add the following code to the new file and save it as masonry-scroll.php.
*/

/*
  Template Name: Masonry Grid Scroll
*/

/*
 * @author  Frank Schrijvers
 * @link    https://www.wpstud.io
 */


// Enqueue scripts for masonry and infinite scroll
add_action('wp_enqueue_scripts', 'wpstudio_load_scripts_frontpage');
function wpstudio_load_scripts_frontpage() {
    wp_enqueue_script( 'infinite_scroll',  get_stylesheet_directory_uri() . '/js/jquery.infinitescroll.min.js', array( ),null,true );
    wp_enqueue_script( 'mansonry-isotope',  get_stylesheet_directory_uri() . '/js/masonry-isotope.min.js', array('infinite_scroll'),null, true );
    wp_enqueue_script( 'mansonry-init',  get_stylesheet_directory_uri() . '/js/init-masonry.min.js', array('jquery'),null, true );
    wp_enqueue_script( 'jquery-masonry', array( 'jquery' ), true );
}
// Step 6 Build the page

// Finally, Genesis need to build the page. Add the following code at the bottom of the page template we’ve created.

// Build the page
get_header();
do_action( 'wpstudio_content_area' );
get_footer();
// Step 4 Create the loop

// Additionally, add the following code to the file we’ve created in step 1.

// Masonry loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'wpstudio_content_area', 'wpstudio_masonry', 30 );

function wpstudio_masonry() { 
  
  $paged   = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;

  $args = ( array(
      'post_type'         => 'post',
      'order'             => 'desc',
      'order_by'          => 'date',
      'paged'             => $paged,
      'posts_per_page'    => 6,
    )
  );

  echo '<section class="blog" id="container">';
  genesis_custom_loop( $args );
  echo '</section>';

  do_action( 'genesis_after_endwhile' );

}
// Step 3 Add custom class to posts

// Add the following code to the file we’ve created in step 1. With this snippet we add a new class (.brick) to the posts on this page.

// Add custom post class to posts
add_filter('post_class', 'wpstudio_custom_post_class');
function wpstudio_custom_post_class($classes) {
  $new_class = 'brick';
  $classes[] = esc_attr(sanitize_html_class($new_class));

  return $classes;
}
// The second file is masonry-isotope.js Add the following code to this file.

/*
	--------------------------------
	Infinite Scroll Behavior
	Masonry Integration
	--------------------------------
	+ https://github.com/paulirish/infinitescroll/
	+ version 2.0b2.110617
	+ Copyright 2011 Paul Irish & Luke Shumard
	+ Licensed under the MIT license
	
	+ Documentation: http://infinite-scroll.com/
	
*/
 
(function( newElements) {
	$.extend($.infinitescroll.prototype,{
		_callback_masonry: function infscr_callback_masonry (newElements) {
			var $newElems = $( newElements ).css({ opacity: 0 });
			$('#container').imagesLoaded( function(){
	
				$('#container').masonry('appended',$(newElements));
				$newElems.animate({ opacity: 1 });
			});
		}
	});
})(jQuery);