How To Create Infinite Scroll Pagination With WordPress

We will use WordPress’ ajax functionality to make the call for this
pagination. First we prepare the basic function for our pagination,
please insert the following code to theme’s functions.php

    function wp_infinitepaginate(){
        $loopFile        = $_POST['loop_file'];
        $paged           = $_POST['page_no'];
        $posts_per_page  = get_option('posts_per_page');
        # Load the posts
        query_posts(array('paged' => $paged ));
        get_template_part( $loopFile );
        exit;
    }

This function will be used to make the call for our pagination,
basically we send two variables to this function via ajax, one is the
page number and another is the file template we are going to use for our
pagination. To enable this function to be used with WordPress ajax, we
need the following code.

The default action for WordPress ajax would be wp_ajax_(our action name), hence why the name infinite_scroll being used in the code example. We need to add two actions, one for logged in users and another is for users that are not logged in.

Next we will need to build the ajax function that will send the two variables we need for our pagination. You can use WordPress hooks to insert this jQuery ajax function or straight away insert it into your theme header.php

<script type="text/javascript">
	var count = 2;
	var total = <?php echo $wp_query->max_num_pages; ?>;
	jQuery(window).data('ajaxready', true).scroll(function(){
		if (jQuery(window).data('ajaxready') == false) return;

		if  (jQuery(window).scrollTop() > jQuery(document).height() - jQuery(window).height()-503){
			if (count > total){
				return false;
			}else{
			jQuery(window).data('ajaxready', false);
				jQuery('a#inifiniteLoader').show('1000');
				loadArticle(count);
			}
			count++;
		}
	});
	function loadArticle(pageNumber) {
		var taxonomyyy = jQuery('.taxonomyyy:first').val();
		jQuery.ajax({
			url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
			type:'POST',
			data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop&taxonomyyy='+taxonomyyy,
			success: function(html){
				jQuery('a#inifiniteLoader').hide('1000');
				jQuery(".portfolio").append(html);    // This will be the div where our content will be loaded  

				jQuery(window).data('ajaxready', true);
			}
		});
		return false;
	}
</script>

Each time the user scrolls to end of the posts, the counter will increase and this will enable us to have the page number pass to our wp_infinitepage() function within our theme’s functions.php. With the scroll and loadArticle functions, we can now do the ajax function call within our WordPress theme, but the result may not appear if we haven’t defined the loop file within our theme folder.

We add a two var count and  total to the function which count have hard coded value 2 because 1st time we already have posts and after each ajax call count variable value added, total will return the total pages available on our site this will be used to ensure no additional calls will be made to the page if the maximum page has been reached.