Load More posts feature in WordPress

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() ); ?>

Leave a Reply

Your email address will not be published. Required fields are marked *