How to implement Ajax Load more pagination on WordPress theme without plugin

By default, WordPress use simple pagination which divide posts into multiple pages, the access is done only via reloading mode which is old-fashioned way for some developers.

For better user experience, Ajax Load more pagination produce the rest results while on first page without reloading.

With Ajax load pagination, WordPress load the rest of pages without paged it into multiple one, which is savvy than standard way.

Here are the steps on implementing Ajax Load more pagination on WordPress theme without plugin;

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 ),
                ]);

6. Done.