Add Infinite Scroll in Genesis Theme

Recently I got an email from John Adam requesting a guide on how to add infinite scroll in genesis child theme. According to the email, he is currently using news pro theme from studiopress and requested for my help.

You might have seen many websites with pagination and they are usually found above the footer area. The pagination is either numbered or they can also be hyperlinked through “Next Post” and “Previous Post”.

But infinite scroll is an all new way of loading your old posts or articles dynamically. It either uses Ajax or JavaScript and loads the entire block of content once the visitor reaches to specific page height or HTML content area.

One of its biggest advantages is that it allows your readers to keep reading your older posts without even clicking a single button. So now your website have longer user engagement and you get a maximum possibility to generate profit.

2 Easy Steps To Add Infinite Scroll In Genesis Theme

Step 1: Your very first step is to install a WordPress plugin named Infinite-Scroll. This plugin will add the required JavaScript and image. It will also provide you with a dedicated options panel to perform certain settings which I will discuss in step 2.

Step 2:  I assume that you have installed the plugin successfully. Now you have to visit its options panel which is available under “Settings” section. Over here you will find lots of fields and they all need to be filled with suitable data.

Essentially infinite scroll uses CSS selectors in order to work properly with your theme. So you need to enter correct CSS class or CSS id to the fields provided in its options page.

Basically, you have to just fill up first four fields as rest of them already consist of data.But you can modify them if you want to give your blog or website a unique look.

As you can see in the screenshot I have entered

• .content for content selector
• .pagination for navigation selector
• .archive-pagination li.pagination-next a for next
• .post for item selector

These are usually the default CSS class for genesis child themes and for the framework. And so I guess that it will work with every website which is powered by genesis framework.

Now once you enter these data to their required field, just click on “Save Options” and reload your website. I am sure enough that your website’s infinite scrolling feature would be working smoothly.

Further Customizations

You can further customize your blog by adding a custom loading image and loading message. You can also add a personalized message if their’s no more posts or articles to load. All of these can be modified through the plugin options panel.

If you still have any problems related to this topic then feel free to share your question in the comment section and I will try my best to solve it for you.