WordPress uses basic pagination by default, dividing posts into numerous pages. Some developers consider this to be an outdated method because it only allows access through reloading mode.
To enhance user experience, Ajax Load More pagination generates the remaining results on the first page without requiring a reload.
WordPress loads the remaining pages using Ajax load pagination instead of pageing them into numerous ones, which is more clever than the conventional method.
To implement Ajax Load more pagination on a WordPress theme without the need for a plugin, follow these steps:
1:Create pagination button on your loop
<div class=”ts-loadmore-paginate”>
<span class=”ts-lodmore-txt”></span>
</div>
2:Create ajax pagination function based with your theme loop
function ts_ajax_paginate() {
$paged = $_POST[‘pageNumber’] ?? 0;
$per_page = 10;
$args[ ‘paged’ ] = $paged;
$args = json_decode( stripslashes( $_POST[ ‘query’ ] ), true );
$args[ ‘post_status’ ] = ‘publish’;
$args[ ‘post_type’ ] = ‘post’;
$args[ ‘posts_per_page’ ] = $per_page;
$args[ ‘paged’ ] = $paged;
query_posts( $args );
if ( have_posts() ) :
while ( have_posts() ): the_post();
get_template_part(“template-parts/post-default”, get_post_format() );
endwhile;
endif;
die();
}
3:Run your ajax pagination function along with WordPress ajax action hook
add_action( ‘wp_ajax_nopriv_loadmore_posts’, ‘ts_ajax_paginate’ );
add_action( ‘wp_ajax_loadmore_posts’, ‘ts_ajax_paginate’ );
4:Create Ajax Load more pagination script based with ts ajax hook as follows;
jQuery( function( $ ) {
‘use strict’;
var pageNumber = 1;
function load_posts() {
pageNumber++;
$.ajax( {
type: ‘POST’,
dataType: ‘html’,
url: ts_loadmore_ags.ajax_url,
data: {
‘pageNumber’: pageNumber,
‘action’: ‘loadmore_posts’,
‘query’: ts_loadmore_ags.posts,
},
success: function(data) {
$(‘.ts-lodmore-txt’).text(‘Load More’);
var $data = $(data);
if($data.length) {
$(‘.banstana’).append($data);
} else{
$(‘.ts-loadmore-link’).attr(‘disabled’,true);
}
}
});
return false;
}
$(‘.ts-loadmore-paginate’).on(‘click’, function( e ) { // When btn is pressed.
e.preventDefault();
$(‘.ts-lodmore-txt’).text(‘Loading…’);
load_posts();
$(this).insertAfter(‘.banstana’); // Move the ‘Load More’ button to the end of the the newly added posts.
})
} );
5:Enqueuing and localize above script
wp_enqueue_script( ‘ts-loadmore’, get_template_directory_uri() . ‘/assets/js/ts-ajax-loadmore.js’, [‘jquery’], time(), true );
global $wp_query;
wp_localize_script( ‘ts-loadmore’, ‘bansta_loadmore_ags’, [
‘ajax_url’ => admin_url(‘admin-ajax.php’),
‘posts’ => json_encode( $wp_query->query_vars ),
]);
Done.