Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Genesis infinite scroll, supporting column classes, custom settings by page, and both auto + button loading
<?php
/**
*
* Infinite Scroll
*
* @since 1.0.0
*
* @author Lauren Gray
* @author Bill Erickson
* @link http://www.billerickson.net/infinite-scroll-in-wordpress
*
* Use ajax to load additional articles upon user scroll.
* After a set number of auto loads, stop until user
* clicks on button to continue. Then auto load continually.
* Support column classes and custom posts per page.
*
* Set up page for infinite scroll
*
*/
add_action( 'genesis_after_loop', 'sn_infinite_scroll_support' );
function sn_infinite_scroll_support() {
if ( ! is_single() ) {
if ( is_home() || is_front_page() ) {
$determinePage = 'is-home';
} else if ( is_category( 508 ) || is_category( 574 ) ) {
$determinePage = 'is-index';
} else if ( is_archive() ) {
$determinePage = 'is-archive';
} else {
$determinePage = 'is-else';
}
echo '<div class="load-more-auto" id="' . $determinePage . '"><i class="fa fa-spinner fa-spinner-hide fa-pulse fa-3x fa-fw"></i></div>';
}
}
/**
*
* Infinite Scroll
*
* @since 1.0.0
*
* @author Lauren Gray
* @author Bill Erickson
* @link http://www.billerickson.net/infinite-scroll-in-wordpress
*
* Enqueue necessary JS file and localize.
*
*/
add_action( 'wp_enqueue_scripts', 'sn_infinite_scroll_enqueue' );
function sn_infinite_scroll_enqueue() {
if ( ! is_singular() ) {
global $wp_query;
$args = array(
'nonce' => wp_create_nonce( 'be-load-more-nonce' ),
'url' => admin_url( 'admin-ajax.php' ),
'query' => $wp_query->query,
'maxpage' => $wp_query->max_num_pages,
);
wp_enqueue_script( 'sn-load-more', get_stylesheet_directory_uri() . '/assets/js/load-more.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'sn-load-more', 'beloadmore', $args );
}
}
/**
*
* Infinite Scroll
*
* @since 1.0.0
*
* @author Lauren Gray
* @author Bill Erickson
* @link http://www.billerickson.net/infinite-scroll-in-wordpress
*
* Parse information
*
*/
add_action( 'wp_ajax_sn_infinite_scroll_ajax', 'sn_infinite_scroll_ajax' );
add_action( 'wp_ajax_nopriv_sn_infinite_scroll_ajax', 'sn_infinite_scroll_ajax' );
function sn_infinite_scroll_ajax() {
if ( ! is_singular() ) {
check_ajax_referer( 'be-load-more-nonce', 'nonce' );
$args = isset( $_POST['query'] ) ? array_map( 'esc_attr', $_POST['query'] ) : array();
$args['post_type'] = isset( $args['post_type'] ) ? esc_attr( $args['post_type'] ) : 'post';
$args['paged'] = esc_attr( $_POST['page'] );
$args['post_status'] = 'publish';
$pageType = esc_attr( $_POST['pageType'] );
if ( $pageType == "is-home" ) {
$initial = 7;
$ppp = 6;
$columns = 2;
} else if ( $pageType == "is-index" ) {
$initial = 12;
$ppp = 12;
$columns = 4;
} else if ( $pageType == "is-archive" ) {
$initial = 15;
$ppp = 9;
$columns = 3;
} else {
$initial = get_option('posts_per_page');
$ppp = get_option('posts_per_page');
$columns = 2;
}
$args['posts_per_page'] = $ppp;
$args['offset'] = $initial + ( $ppp * ( $_POST['page'] - 2 ) );
ob_start();
$loop = new WP_Query( $args );
if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post();
sn_post_summary( $loop->current_post, $columns );
endwhile;
endif;
wp_reset_postdata();
$page = esc_attr( $_POST['page'] );
if ( $page == 4 ) {
echo '<a class="load-more-button"><i class="fa fa-caret-down" aria-hidden="true"></i> Load More</a>';
} else if ( $wp_query->max_num_pages > $_POST['page'] ) {
echo '<div class="load-more-auto"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>';
}
$data = ob_get_clean();
wp_send_json_success( $data );
wp_die();
}
}
/**
*
* Infinite Scroll
*
* @since 1.0.0
*
* @author Lauren Gray
* @author Bill Erickson
* @link http://www.billerickson.net/infinite-scroll-in-wordpress
*
* Output articles
*
*/
function sn_post_summary( $count, $columns ) {
// Be able to convert the number of columns to the class name in Genesis
$fractions = array( '', 'half', 'third', 'fourth', 'fifth', 'sixth' );
// Make a note of which column we're in
$column_number = ( $count % $columns ) + 1;
// Add one-* class to make it correct width
$countClasses = sprintf( 'one-' . $fractions[$columns - 1] . ' ', $columns );
// Add a class to the first column, so we're sure of starting a new row with no padding-left
if ( 1 == $column_number )
$countClasses .= 'first ';
echo '<article class="' . $countClasses . implode( ' ', get_post_class() ) . '">'; // add column class
do_action( 'genesis_entry_header' );
echo '</article>';
}
jQuery(function($){
$('.pagination').remove()
var button = $('.content .load-more-auto');
var page = 2;
var loading = false;
var maxpage = beloadmore.maxpage;
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 400 //(milliseconds) adjust to the highest acceptable value
};
var waiting = false;
var pageType = $('.load-more-auto').attr('id');
// Load more on scroll
$(window).scroll(function(){
if( ! loading && scrollHandling.allow && ! waiting ) {
scrollHandling.allow = false;
setTimeout(scrollHandling.reallow, scrollHandling.delay);
var offset = $(button).offset().top - $(window).scrollTop();
if( 2000 > offset ) {
be_load_more();
}
}
});
// Load more on click
$('body').on('click', '.load-more-button', function(){
if( ! loading ) {
be_load_more();
}
});
function be_load_more() {
loading = true;
$(".fa-spinner-hide").fadeIn( 1000 );
var data = {
action: 'sn_infinite_scroll_ajax',
nonce: beloadmore.nonce,
page: page,
pageType: pageType,
query: beloadmore.query,
};
$.post(beloadmore.url, data, function(res) {
if( res.success) {
$('.load-more-button').remove();
$(res.data).hide().appendTo('.content').fadeIn( 1000 );
if( page >= maxpage) {
$('.content').append( '<div class="fully-loaded">No more articles</div>' );
}
waiting = false;
page = page + 1;
loading = false;
$('.fa-spinner-hide').fadeOut(1000);
} else {
// console.log(res);
}
}).fail(function(xhr, textStatus, e) {
// console.log(xhr.responseText);
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.