In this tutorial I wanted to show you how easy it is to add Infinite Scrolling to Genesis Child Themes using one of several free WordPress Plugins. But before I get to the details you may be wondering what “Infinite Scrolling” is and why you’d want to add it to your Genesis powered website.
What Is Infinite Scrolling And How Is It Useful?
By default you set the number of blog posts you want to display on any given blog archive page and then Genesis provides your visitors with pagination links or buttons to navigate to the other pages of blog posts. This works just fine and may be perfectly suited for your particular blog. But this can be a bit tedious if you have a lot of blog posts and your visitors simply want to scroll through your archives without having to click a bunch of “Next” links. This is where Infinite Scrolling comes in.
With Infinite Scrolling your blog posts simply load onto the page as you scroll down. So those initial blog posts will still display as they did before, but once you get to the last of that “batch” the Infinite Scrolling functionality will then load the next set. And this will continue as long as your scroll down the page. So now instead of your visitor having to “turn pages” they can just scroll to their heart’s content.
Setting It Up On Your Genesis Powered Website
As I mentioned above there are several solid free WordPress Plugins out there that can help you accomplish this task. I just picked one that looked well maintained and it worked quite nicely. Also note that this can also be done with custom coding, but I’m focusing on the Plugin solution for this tutorial to keep the process as quick and easy as possible.
For this tutorial I chose the YITH Infinite Scrolling Plugin. Please note that they do offer a premium version of this Plugin and that may or may not be something you’d be interested in, but I just want to be clear that I’m not promoting that nor have I tested it out. So all you have to do is install and activate that Plugin and then click into their options page that will appear after activation is complete. Once in that options page you simply need to change four settings and then click save.
The four values need to look like so:
Navigation Selector = .archive-pagination
Next Selector = .archive-pagination .pagination-next
Item Selector = article.post
Content Selector = .content
After you’ve updated these settings values accordingly and saved your changes you should now be able to refresh the front-end of your site or click over to your blog archive page and then start scrolling to see the auto-loading effect in action. If it’s not working then it may be that your Genesis Child Theme has some custom coding that is conflicting with the Plugin or something of that nature. Either way, this worked perfectly for me using our Dynamik Website Builder Genesis Child Theme so I’m guessing it will work for most other Genesis Child Theme’s as well.
Infinite Scrolling Screencast:
Follow & Share:
