Copy below code into your functions.php
function misha_paginator( $first_page_url ){
// the function works only with $wp_query that's why we must use query_posts() instead of WP_Query()
global $wp_query;
// remove the trailing slash if necessary
$first_page_url = untrailingslashit( $first_page_url );
// it is time to separate our URL from search query
$first_page_url_exploded = array(); // set it to empty array
$first_page_url_exploded = explode("/?", $first_page_url);
// by default a search query is empty
$search_query = '';
// if the second array element exists
if( isset( $first_page_url_exploded[1] ) ) {
$search_query = "/?" . $first_page_url_exploded[1];
$first_page_url = $first_page_url_exploded[0];
}
// get parameters from $wp_query object
// how much posts to display per page (DO NOT SET CUSTOM VALUE HERE!!!)
$posts_per_page = (int) $wp_query->query_vars['posts_per_page'];
// current page
$current_page = (int) $wp_query->query_vars['paged'];
// the overall amount of pages
$max_page = $wp_query->max_num_pages;
// we don't have to display pagination or load more button in this case
if( $max_page <= 1 ) return;
// set the current page to 1 if not exists
if( empty( $current_page ) || $current_page == 0) $current_page = 1;
// you can play with this parameter - how much links to display in pagination
$links_in_the_middle = 4;
$links_in_the_middle_minus_1 = $links_in_the_middle-1;
$first_link_in_the_middle = $current_page - floor( $links_in_the_middle_minus_1/2 );
$last_link_in_the_middle = $current_page + ceil( $links_in_the_middle_minus_1/2 );
// some calculations with $first_link_in_the_middle and $last_link_in_the_middle
if( $first_link_in_the_middle <= 0 ) $first_link_in_the_middle = 1;
if( ( $last_link_in_the_middle - $first_link_in_the_middle ) != $links_in_the_middle_minus_1 ) { $last_link_in_the_middle = $first_link_in_the_middle + $links_in_the_middle_minus_1; }
if( $last_link_in_the_middle > $max_page ) { $first_link_in_the_middle = $max_page - $links_in_the_middle_minus_1; $last_link_in_the_middle = (int) $max_page; }
if( $first_link_in_the_middle <= 0 ) $first_link_in_the_middle = 1;
// begin to generate HTML of the pagination
$pagination = '<nav id="misha_pagination" class="navigation pagination" role="navigation">
<div class="older">';
if( $current_page < $max_page )
$pagination.= '<a title="Read More" id="misha_loadmore">Read More <i class="fa fa-angle-double-right"></i> </a> ';
$pagination.= "</div></nav>\n";
echo str_replace(array("/page/1?", "/page/1\""), array("?", "\""), $pagination);
}
function misha_my_load_more_scripts() {
global $wp_query;
// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');
// register our main script but do not enqueue it yet
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages,
'first_page' => get_pagenum_link(1)
) );
wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );
function misha_loadmore_ajax_handler(){
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
query_posts( $args );
if( have_posts() ) :
while( have_posts() ): the_post();
get_template_part('content', 'grid');
endwhile;
endif;
die;
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}
JS code to send Ajax call and receive response
<script type="text/javascript">
jQuery(function($){
$('body').on('click', '#misha_loadmore', function(){
$.ajax({
url : misha_loadmore_params.ajaxurl,
data : {
'action': 'loadmore',
'query': misha_loadmore_params.posts,
'page' : misha_loadmore_params.current_page,
'first_page' : misha_loadmore_params.first_page // here is the new parameter
},
type : 'POST',
beforeSend : function ( xhr ) {
$('#misha_loadmore').text('Loading...');
},
success : function( data ){
$('ul.sp-grid').append(data);
//$('#misha_pagination').remove();
$('#misha_loadmore').html('Read More <i class="fa fa-angle-double-right"></i>');
misha_loadmore_params.current_page++;
}
});
return false;
});
});
</script>
Finally html button which will be clicked to load more posts again and again.
<?php misha_paginator( get_pagenum_link() ); ?>