Ajax load more posts pagination produces a good user experience as it loads other pages without reloading, which is one among of the best modern features.

This tutorial is working perfect for WordPress theme that lacks Load more pagination feature, using core WP ajax to produce the outcome.

If you have theme that does not support this feature, then follow my guide step by step to implement it at any project, the steps require button HTML, jQuery, and PHP codes.

Steps to implement Ajax Load more posts pagination without plugin:

1. Open WP theme editor to edit files within or your project through code writing tools.
2. Open file contains default pagination, then replace current pagination links with following code:

<div class="ts-loadmore-btn">
                    <a class="ts-loadmore-link" href="#">
                        <span class="ts-lodmore-txt"><?php echo esc_html('Load More' ); ?></span>
                    </a>
                </div>

3. Open functions.php and add action to call up ajax function:

add_action( 'wp_ajax_nopriv_loadmore_posts', 'ts_loadmore_posts' );
add_action( 'wp_ajax_loadmore_posts', 'ts_loadmore_posts' );

The above codes contain WP ajax action for both logged and non-logged user with callback function.

4. Create a callback function to load in WP Ajax action with following codes:

function ts_loadmore_posts(){ 

            $paged = $_POST['pageNumber'] ?? 0;

            $args[ 'paged' ] = $paged;
            $args = json_decode( stripslashes( $_POST[ 'query' ] ), true );
            $args[ 'post_status' ]      = 'publish';
            $args[ 'post_type' ]        = 'post';
            $args[ 'posts_per_page' ]   = 10;
            $args[ 'order' ]            = 'DESC';
            $args[ 'paged' ]            = $paged;
        
            query_posts( $args );
        
            if ( have_posts() ) :
                while ( have_posts() ): the_post();
        
                    get_template_part( 'template-parts/post', 'content' );
        
                endwhile;
        
            endif;
            die(); 
            
        }

NOTE: Make sure template part directory is similar with your blog homepage.

5. Create a jQuery script for Ajax Load more pagination with details according to button and its action with following codes:

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': 'ts_loadmore_posts', 
            'query': ts_loadmore_ags.posts,
            'page': ts_loadmore_ags.cur_page
            },
            success: function(data) {
                $('.ts-lodmore-txt').text('Load More');
                var $data = $(data);
                if($data.length) {
                    $('.load-more-wrap').append($data);
                } else{
                    $('.ts-loadmore-link').attr('disabled',true);
                }
               
            },
            error : function(jqXHR, textStatus, errorThrown) {
                $loader.html(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown);
            }

        });
        return false;
    }

    $('.ts-loadmore-link').on('click', function( e ) { // When btn is pressed.
        e.preventDefault();
        $('.ts-lodmore-txt').text('Loading...');
        load_posts();
        $(this).insertAfter('.load-more-wrap'); // Move the 'Load More' button to the end of the the newly added posts.
        
    })
	
} );

NB: Make sure you create load-more-wrap class before the loop of your homepage.

6. Enqueueing your scripts in functions.php to run on front-end with following codes:

wp_enqueue_script( 'ts-loadmore', get_template_directory_uri() . '/assets/js/ajax-loadmore.js', ['jquery'], true );
                global $wp_query;
                wp_localize_script( 'ts-loadmore', 'ts_loadmore_ags', [
                    'ajax_url' => admin_url('admin-ajax.php'),
                    'posts' => json_encode( $wp_query->query_vars ),
                    'cur_page' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
                    'max_page' => $wp_query->max_num_pages,
                ]);

7. Done