How to Create Infinite Scrolling on Your Website

Infinite scrolling is all the craze among web designers now. Join the bandwagon and learn how to incorporate infinite scrolling into your website!

If you follow the thorough steps listed below, you’ll be able to create infinite scrolling without much trouble!

Step 1: Figure out your pagination.

Where do you want to put infinite scrolling on your website? If there’s pagination (page numbers) in the middle of your website, then infinite scrolling won’t work there. The best place for infinite scrolling to take place is the very bottom of the page without much content in the footer section.

Step 2: Create the ajax function:

Okay, back up a bit and let us explain what the ajax function is. It’s a function that sends data to files when you do something in javascript. In this case, when you scroll to the bottom of the page, the ajax function will send the data to another file, which in turn figures out what to do (more specifically, loads more content). Essentially, the ajax function acts as the messenger.

To build the ajax function into your WordPress theme, add the following code to your functions.php file:

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;

}

 

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

Step 3: Create a jQuery ajax function.

This specific function exists just to send two variables to the files: the page number and the file template for your pagination. Add the following code to your header.php file:

<script type="text/javascript">

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){

                                    $("#content").append(html);    // This will be the div where our content will be loaded

                        }

            });

            return false;

}

</script>

Step 4: Create a function that lets the files know that your user hit the bottom of the page.

This is pretty easy to do via jQuery. Just use the following code:

<script type="text/javascript">

            $(window).scroll(function(){

                    if  ($(window).scrollTop() == $(document).height() - $(window).height()){

}

            });

</script>

Step 5: Create a function that loads more content once the user hits the bottom of the page.

This is where the exciting stuff starts to happen! The following code comes after the function above:

<script type="text/javascript">

            var count = 2;

            $(window).scroll(function(){

                    if  ($(window).scrollTop() == $(document).height() - $(window).height()){

                       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){

                            $("#content").append(html);   // This will be the div where our content will be loaded

                        }

                    });

                return false;

            }

</script>

Step 6: Define the loop file within your theme folder.

Look for the div with the id=”content”. Most WordPress themes already have it somewhere. It should look something like this:

<div id="content"> loop content </div>


If you don’t have this div, simply add the above code to your index.php file.

Step 7: Add a code to let the user know that there is no more content to be shown.

You don’t want your users to constantly hit the bottom page without being told that there’s no more content to be seen. You can easily fix this problem by adding a code to your scroll function that will make the pagination simply stop loading once there is no more content to be shown. Add the following code to your functions.php file:

<script type="text/javascript">

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++;

            }

});

</script>


And add this to your jQuery code:

 

if (!is_single() || !is_page()):

// our jQuery function here

endif;

This is all you need to do! If you have any questions or ideas, please don’t hesitate to let us know in the comments below!