Add Infinite Scroll to a WordPress Theme

Infinite Scroll is a popular way to dynamically load fresh content into a site as a user scrolls down through it. It’s also quite easy to code into a WordPress theme. Here’s a quick walkthrough of how to do it:

(If you’re looking for a plugin to do this instead, use the “Infinite Scroll” module in the Jetpack plugin).

Get the Script Assets

Download a copy of “jquery.infinitescroll.min.js” from the GitHub repository, and drop it into the “scripts” or “js” folder of your WordPress theme.

Pick out the ajax-loader.gif of your choice, and add it to your theme “images” folder.

Enqueue the Script

You’ll need to register and enqueue the required script in functions.php:

[gist id=”399e8c6966360dbac708ffff4178b780″ file=”enqueue.php” lines=”2-18″]

Init the Script

In the code snippet below I list the parameters I used in my theme. You’ll likely need to customize these in order to match your theme markup:

  • img: The path to the ajax loader image
  • nextSelector: Selector for the “previous posts” link.
  • navSelector: Containing selector for the previous/next navigation links.
  • itemSelector: Selector for posts. This might be .hentry, .post, .etc
  • contentSelector: Containing div for your posts.

[gist id=”399e8c6966360dbac708ffff4178b780″ file=”enqueue.php” lines=”20-42″]

Note: Also make sure to update “custom” to your own textdomain for translations.

Try it out

If you load a category or home page the site should now be infinite scrolling. If not, check the web developer console to see if a script didn’t load or if there’s a javascript error. Also, double check that you’re selectors listed above are all correct.

Possible Issues

If you’re releasing a theme for other people to use, definitely include an option to turn off infinite scroll. It won’t work for everyone- especially if they have plugins that add social buttons or render additional javascript in the post content.

I wrote a little more about some of those issues in this post

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

108 Responses

  1. James Pondoc

    Where should I put the last two screenshot codes that were posted above. Please help me having some problems with the infinite scrolling..

    1. Andy

      Great tutorial. I would like to know if this is possible too, because if your theme has sidebars that drop to the bottom at smaller screen sizes, clicking for more posts would be better for these type of themes.

  2. Any idea what I need to replace in these:

    “nextSelector”:”#nav-below .nav-previous a”,

    in order for infinite scroll to work with my theme? I’m a bit confused since there is no previous or next button in my theme, just a down arrow.

    Thanks for the tutorial!

  3. Hi i’m using the script on a dev wp install crafted with foundation. The script work well but when the second page loads, it seems that some foundation scripts are not reloaded (accordion toggle and block-grid image adjustment). I also get a 404 error as the script try to load a 3rd page who not exist.
    I know we can reload scripts after the scrolling is done but I really don’t know how to achieve it. Any help would be appreciated. website adress :

    1. ilana

      Hi Olivier did you work this out? I am also using foundation on WordPress and about to try implementing infinite scroll. Thank you!

  4. Anfisa

    Hello Devin,
    Thank you so much for script. I try to implement Infinite Scroll, but it doesn’t work for me. In console is an error Uncaught TypeError: jQuery(…).infinitescroll is not a function . Cannot understand how to solve it. I tried to implement it in different themes and in default theme (Twenty seventeen) as well. The result is the same. Do you have any ideas what is wrong? Maybe you had the same problem?

  5. Anfisa

    Hello Devin again,
    After couple of hours I have finaly found the reason of error.

    First of all Infinite Scroll reliesed a new version 3.0, and upgrading from v2 to v3 require making several changes in code.

    Here they are:
    1. infinitescroll -> infiniteScroll
    2. itemSelector -> append
    3. nextSelector -> path

    After these changes infiniteScroll works perfect.

    Thank you once again for your solution :)

Leave a Reply