Last active
May 14, 2018 21:15
-
-
Save graylaurenm/86daa4f23aa8749c0933f72133ac7106 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_singular() ) { | |
if ( is_home() || is_front_page() ) { | |
$determinePage = 'is-home'; | |
} else if ( is_category( 508 ) || is_category( 1551 ) ) { | |
$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'] ); | |
$page = esc_attr( $_POST['page'] ); | |
$done = esc_attr( $_POST['done'] ); | |
$overMax = esc_attr( $_POST['overMax'] ); | |
if ( $pageType == "is-home" ) { | |
$initial = 7; | |
$ppp = 6; | |
$columns = 2; | |
add_filter( 'genesis_post_info', 'sn_infinite_post_info' ); | |
add_filter( 'excerpt_length', 'sn_infinite_excerpt_length' ); | |
} else if ( $pageType == "is-index" ) { | |
$initial = 12; | |
$ppp = 12; | |
if ( ! wp_is_mobile() ) { | |
$columns = 4; | |
} else { | |
$columns = 2; | |
} | |
} else if ( $pageType == "is-archive" ) { | |
$initial = 18; | |
$ppp = 6; | |
if ( ! wp_is_mobile() ) { | |
$columns = 3; | |
} else { | |
$columns = 2; | |
} | |
} else { | |
$initial = $posts_per_page; | |
$ppp = $posts_per_page; | |
$columns = 2; | |
} | |
$args['posts_per_page'] = $ppp; | |
$args['offset'] = $initial + ( $ppp * ( $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, $pageType ); | |
endwhile; | |
endif; | |
wp_reset_postdata(); | |
if ( $page == 4 && ! $done && ! $overMax ) { | |
echo '<a class="load-more-button"><svg id="pagination-arrow-down" data-name="pagination-arrow-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.44 62.88"><polygon class="pagination-bg" points="91.44 41.96 47.27 62.88 3.55 41.96 3.55 3.54 91.44 3.54 91.44 41.96"/><polygon class="pagination-outline" points="88.39 38.91 44.23 59.83 0.5 38.91 0.5 0.5 88.39 0.5 88.39 38.91"/></svg><span>Load More</span></a>'; | |
} | |
$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, $pageType ) { | |
// 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' ); | |
if ( $pageType != "is-index" && $pageType != "is-archive" ) | |
do_action( 'genesis_entry_content' ); | |
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 pageType = $('.load-more-auto').attr('id'); | |
var waiting = false; | |
var done = false; | |
var overMax = false; | |
$(window).scroll(function(){ // differs | |
if( ! done && ! loading && scrollHandling.allow && ! waiting ) { // differs | |
scrollHandling.allow = false; // differs | |
setTimeout(scrollHandling.reallow, scrollHandling.delay); // differs | |
var offset = $(button).offset().top - $(window).scrollTop(); // differs | |
if( 2000 > offset ) { // differs | |
$(button).appendTo('.content'); | |
loading = true; | |
$('.load-more-auto').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-auto').remove(); | |
$(res.data).hide().appendTo('.content').fadeIn(1000); | |
page = page + 1; | |
if( page >= maxpage ) { | |
overMax = true; | |
} | |
if( overMax ) { | |
$('.content').append( '<div class="fully-loaded">No more articles</div>' ); | |
waiting = true; // differs | |
done = true; | |
} else if ( page == 5 ) { // differs | |
waiting = true; | |
} | |
loading = false; | |
$('.load-more-auto').fadeOut(1000); | |
} else { | |
// console.log(res); | |
} | |
}).fail(function(xhr, textStatus, e) { | |
// console.log(xhr.responseText); | |
}); | |
} | |
} | |
}); | |
// Not "DRY" (see "differs") | |
$('body').on('click', '.load-more-button', function(){ // differs | |
if( ! loading ) { // differs | |
$('.load-more-button').remove(); | |
$(button).appendTo('.content'); | |
loading = true; | |
$(".load-more-auto").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) { | |
$(res.data).hide().appendTo('.content').fadeIn(1000); | |
page = page + 1; | |
if( page >= maxpage ) { | |
overMax = true; | |
} | |
if( overMax ) { | |
$('.content').append( '<div class="fully-loaded">No more articles</div>' ); | |
done = true; | |
} else { // differs | |
waiting = false; | |
} | |
loading = false; | |
$('.load-more-auto').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