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
Where should I put the last two screenshot codes that were posted above. Please help me having some problems with the infinite scrolling..
Put it on the functions.php file of your theme.
I, just to say that i’ve searched for this solution but no piece of code worked. Your tutorial is simple, short and works.
Many thanks !!
Hi, thanks for the tutorial. Any idea how to add a ‘load more posts’ button so that the posts get ajaxed on its click?
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.
This post is specifically about how to use the infinitescroll script (https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.min.js) which doesn’t have a button click option. But the JetPack Infinite Scroll module is great and does offer that functionality. If you’re interested in the internals you could view the code https://github.com/Automattic/jetpack/tree/master/modules/infinite-scroll, but if all you need is the functionality on your site just use that plugin!
Any idea what I need to replace in these:
“nextSelector”:”#nav-below .nav-previous a”,
“navSelector”:”#nav-below”,
“itemSelector”:”article”,
“contentSelector”:”#content”
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!
I am also searching for the same solution? Did you happen to find one?
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 : http://dev.numero7.ch
Hi Olivier did you work this out? I am also using foundation on WordPress and about to try implementing infinite scroll. Thank you!
Hi just wondering – what if you only want to implement this on one page? Eg homepage template?
Thanks.
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?
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 :)