Week 9 Post – Report 9

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 );
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; ?>;
       if ($(window).scrollTop() == $(document).height() - $(window).height()){
         if (count > total){
           return false;

  function loadArticle(pageNumber){ 
       url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
       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;


<!-- 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.

header sidebar

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.



One comment on “Week 9 Post – Report 9

  1. Very interesting approach to the infinite scroll. I am curious to know if this particular coding approach not only loads additional posts, but if there is also a way of loading images, video, and other media objects. This is what I was discussing in regards to Aesop Story Engine, which allows use to create a long form page of multimedia for digital storytelling. Excellent start to incorporating the techniques of infinite scrolling.

Leave a Reply