Skip to content

Instantly share code, notes, and snippets.

@billerickson
Last active September 24, 2021 10:28
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save billerickson/669a1477068f0d4b5dc0 to your computer and use it in GitHub Desktop.
Save billerickson/669a1477068f0d4b5dc0 to your computer and use it in GitHub Desktop.
<?php
/**
* Javascript for Load More
*
*/
function be_load_more_js() {
global $wp_query;
$args = array(
'nonce' => wp_create_nonce( 'be-load-more-nonce' ),
'url' => admin_url( 'admin-ajax.php' ),
'query' => $wp_query->query,
);
wp_enqueue_script( 'be-load-more', get_stylesheet_directory_uri() . '/js/load-more.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'be-load-more', 'beloadmore', $args );
}
add_action( 'wp_enqueue_scripts', 'be_load_more_js' );
/**
* AJAX Load More
*
*/
function be_ajax_load_more() {
check_ajax_referer( 'be-load-more-nonce', 'nonce' );
$args = isset( $_POST['query'] ) ? $_POST['query'] : array();
$args['post_type'] = isset( $args['post_type'] ) ? $args['post_type'] : 'post';
$args['paged'] = $_POST['page'];
$args['post_status'] = 'publish';
ob_start();
$loop = new WP_Query( $args );
if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post();
be_post_summary();
endwhile; endif; wp_reset_postdata();
$data = ob_get_clean();
wp_send_json_success( $data );
}
add_action( 'wp_ajax_be_ajax_load_more', 'be_ajax_load_more' );
add_action( 'wp_ajax_nopriv_be_ajax_load_more', 'be_ajax_load_more' );
jQuery(function($){
$('.post-listing').append( '<span class="load-more"></span>' );
var button = $('.post-listing .load-more');
var page = 2;
var loading = false;
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 400 //(milliseconds) adjust to the highest acceptable value
};
$(window).scroll(function(){
if( ! loading && scrollHandling.allow ) {
scrollHandling.allow = false;
setTimeout(scrollHandling.reallow, scrollHandling.delay);
var offset = $(button).offset().top - $(window).scrollTop();
if( 2000 > offset ) {
loading = true;
var data = {
action: 'be_ajax_load_more',
nonce: beloadmore.nonce,
page: page,
query: beloadmore.query,
};
$.post(beloadmore.url, data, function(res) {
if( res.success) {
$('.post-listing').append( res.data );
$('.post-listing').append( button );
page = page + 1;
loading = false;
} else {
// console.log(res);
}
}).fail(function(xhr, textStatus, e) {
// console.log(xhr.responseText);
});
}
}
});
});
@ClaudiaSarahCode
Copy link

Really nice work!

@fastmarketo
Copy link

I have added Javascript, and other functions in my functions.php as stated above, but how can I reproduce those functions in my home.php files?

@babatundebusari
Copy link

babatundebusari commented Nov 22, 2018

@billerickson thanks a lot!

will be nice to see a post of auto load post on scroll down as well...so when a user is reading a blog post as they scroll to end of the post..another blog post is loaded

you can see action on this website for example https://venturebeat.com/2018/11/22/tesla-takes-a-hit-on-trade-war-tariffs-by-cutting-car-prices-in-china/

@cinghaman
Copy link

Thanks for this did you call this function on your archive page be_ajax_load_more() ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment