Infinite Scroll Implemented Using Ajax

Last week, I tried to implement infinite scroll using Jetpack but the functionality is restricted because our live server is within university firewall. This week, I found another way to realize the infinite scroll on the index page.

This tutorial webpage, How to Create Infinite Scroll Pagination, illustrates the process of adding infinite scroll step by step and provides the necessary codes. I followed this tutorial and edited my codes accordingly. Since the theme this tutorial talks about is different from mine, I needed to do make changes to the codes so that they are compatible with my theme.

I modified index.php (remove the original page pagination)

<?php //the_posts_navigation(); ?>

function.php (add the wp_infinitepaginate() function)

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('post_type' => 'post','paged' => $paged)); 
  get_template_part( $loopFile );
  exit;
}
add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in

header.php (add the codes provided with slight change)

<?php if (!is_single() && !is_page()): ?>

<script type="text/javascript">
  jQuery(document).ready(function($) {
    var count = 2;
    var total = <?php echo $wp_query->max_num_pages; ?>;
    $(window).scroll(function(){
       if ($(window).scrollTop() == $(document).height() - $(window).height()){
         if (count > total){
           return false;
         }else{
           loadArticle(count);
         }
           count++;
      }
   }); 

  function loadArticle(pageNumber){ 
    $.ajax({
       url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
       type:'POST',
       data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
       success: function(html){
       $("#primary").append(html); // This will be the div where our content will be loaded
       }
    });
    return false;
   }
  });

</script>

<!-- end infinite scroll pagination -->
<?php endif; ?>

I also added a loop.php to my theme that displays the reloaded content (copy and change from the section <main> in index.php).

The result is similar with the one implemented with Jetpack and it can run on the live server.

Changes Made on Collaborative Design

As discussed in the meeting last week, I added a header sidebar to the custom page template and it contains a calendar widget and a tag cloud widget.

I also added a hyperlink effect using some HTML tricks in the page editor.

as shown above, I went to the text panel of the Collaborative Project page, added an id to each image and used

<a hred="#id_of_the_next_image"></a>

to realize the hyperlink. So when I click on the calendar, the webpage will jump to the month Oct automatically.

It is not a solution for the real project but it gives the general idea of what the final web would look like.