-
-
Save ivcreative/ae8f02cb35df4f47482297329d81c06b to your computer and use it in GitHub Desktop.
Genesis infinite scroll, supporting column classes, custom settings by page, and both auto + button loading
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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>'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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