SumTips
SumTips
How To?

Implement Infinite Scrolling on a WordPress Theme

Print View Mobile View

Infinite scrolling is a pagination where new articles load dynamically when a user scroll to bottom of the page. Examples of infinite scroll can be seen on sites such as Twitter and Google+, and more recently on WordPress.com hosted blog themes. It’s pretty easy to implement the feature on most WordPress themes; by following this post, you should be able to add it on your theme within 15 minutes.

Implementing Infinite Scroll

There are two ways to go about it, using a plugin or manually coding it into your theme.

Plugin Way

If you don’t want to mess with coding, simply install the Infinite-Scroll plugin by Paul Irish. If you are using the default theme, or a theme coded similar to it, the plugin would work straight out of the box. However, if you are using a custom designed theme, go to the plugin’s setting page and adjust the Selectors.

Infinite Scroll settings
Get Infinite-Scroll WordPress Plugin

Code Way

Again, we are going to use the jQuery plugin (used in the WordPress plugin) by Paul to code the feature into a WordPress theme. Download a copy of “jquery.infinitescroll.min.js” from the GitHub repository, and drop it into your theme folder. If you have a folder for scripts, you can place it in that as well.

With the script in place, open your theme’s header.php file and add below code between the <head>...</head> tags:

<?php if(!is_single()) { ?>
	<script type="text/javascript" src="<?php bloginfo("template_directory"); ?>/scripts/jquery.infinitescroll.min.js"></script>
<?php } ?>

Or, just drop this code into your functions.php file:

function infinite_scroll_js(){
    wp_register_script( 'infinite_scroll',  get_template_directory_uri() . '/scripts/jquery.infinitescroll.min.js', array('jquery'),null,true );
    if( !is_singular() ) {
        wp_enqueue_script('infinite_scroll');
    }
}
add_action('wp_enqueue_scripts', 'infinite_scroll_js');

Next, add this to the functions file as well:

function infinite_scroll_script() {
    if( !is_singular() ) { ?>
    <script type='text/javascript'>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading more posts..', 'sttheme' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'sttheme' ); ?>"
        },
        "nextSelector":"#nav-below .nav-previous a:first",
        "navSelector":"#nav-below",
        "itemSelector":"#content article.post",
        "contentSelector":"#content"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    </script>
    <?php
    }
}
add_action( 'wp_head', 'infinite_scroll_script' );

For the plugin to work, you need to customize above code parameters with your own theme’s. You need to change these:
img: Path to Ajax loader image. There’s one available in the WordPress plugin folder you downloaded, or if you already have an image available, upload it your server and provide its path here.
nextSelector: Selector of the link pointing to next page of posts
navSelector: Selector of the div containing your theme’s navigation links
itemSelector: Main post selector
contentSelector: Selector of the div that wraps your posts

That’s it with the coding part. If you go to your home page or any archive page, you should see new posts loading as you scroll down. If it’s not working, check your selectors if they are correct.

Things to remember:

  • Do not remove your existing navigation links once you implement infinite scroll
  • Check your website with JavaScript execution disabled in browser
  • Check your server load. On a heavy traffic site, with several users doing infinite scroll at the same time could crash your web server.

Related tips: