How To Add Infinite Scroll To Your WordPress Site

Exclusive WPEngine Coupon Code for AlienWP Visitors!
Get 5 Months Free & 30% Off All Plans.
Click the coupon code to copy and open the link »

---

Click Here for Deal

---

Many authority sites have been using the Infinite Scrolling feature to create a seamless user experience by making things effortless and distraction free. What made this feature more popular is the extreme success it achieved when social media giants like Facebook and Twitter used it as a strategy to keep its visitors glued to it.

Infinite Scroll, Image by The End Result.

In this tutorial, we will tell you how to add infinite scroll to your WordPress site easily and efficiently. But first let’s answer a few other things you need to know before you add this feature to your site.

Is Your Site Suited To Use Infinite Scroll?

Before using the Infinite Scroll feature on your website, it is good to find out whether this feature is a good fit for your website. Not every website is meant to use this feature. For example, websites that want its visitors to perform a particular task like searching for a specific product or looking up for a specific content, should not be using this feature.

This is because this feature might make your visitors overwhelmed with the amount of information they can see. Besides they might just get distracted and get diverted from what they were looking for. This in return can affect your site’s goal.

This feature is a big no-no for e-commerce sites. It, however, works great with sites that contain a lot of content that is regularly posted and updated. You should also definitely use this feature on blogs and websites that publish posts of equal importance and more or less of the similar length.

Does This Feature Have Any Negative Impact

One of the major flaws that I came across is that the footer links never show up on the Home page of your blog where you generally display your latest posts. This is not a great thing that you would want to happen on your site.

Another drawback about these plugins is that it might sometimes overwhelm the readers with the amount of content that is displayed all at once. Many visitors also do not like this feature because they fail to relocate the content they read seconds ago. And instead of making things easier, they get stuck locating the content that was just lost.

What Are the Positive Effects Of This Feature

Even though the Infinite Scroll feature has a few drawbacks, it comes with its own set of advantages too. And people who have used this feature on their site have loved it for this reason.

Using the Infinite Scroll feature is one of the best ways to keep your readers and visitors stick around for longer. By using this feature you can easily keep your readers engaged on your posts by continuosuly producing interesting content for them. This would subsequently result in making them stay on your site for longer. This is a great way to decrease the bounce rate of your site.

That’s not the end. This feature also simplifies the process of navigating to other pages of your site. By doing that you enhance the user experience of your site. And readers love visiting sites that are easy to navigate.

Let us now look at how this feature can be added to your WordPress site.

How To Add Infinite scroll To Your WordPress Site?

Adding the Infinite Scrolling feature to your WordPress site is not a very complex task, provided you have a theme that is coded well enough to support such a feature. However, this doesn’t at all mean that you would not be able to add this feature to your site if your theme does not support it.

In today’s post, we will tell you 2 different ways of adding this feature to your website.

1. Manually Method By Coding
2. Through Plugins

1. Adding Infinite Scroll Manually By Coding

Freelance Web Developer Tyler Longren offers some amazing solutions for adding this feature to sites with themes that do not support the feature.

For that let us first activate Infinite Scroll. This can be easily done by adding the following code to your theme’s function .php file.

function mytheme_infinite_scroll_init() {
add_theme_support( ‘infinite-scroll’, array(
‘container’ => ‘content’,
‘render’ => ‘mytheme_infinite_scroll_render’,
‘footer’ => ‘wrapper’,
) );
}
add_action( ‘init’, ‘mytheme_infinite_scroll_init’ );

In the next step, you will have to setup function for the Render Parameter. Render Parameter is the function in the code that is responsible for loading new posts for endless scrolling.

In this case, it is the mytheme_infinite_scroll_init. Now add the following snippet to the function .php file.  This is a basic implementation that can be used with the Jetpack Plugin, which is a free plugin that can be easily activated at the backend of your site.


function mytheme_infinite_scroll_render() {
get_template_part( ‘loop’ );
}


And that’s it. Your infinite scroll should start working as soon as this is done. But wait. Is it still not working? Well in that case, we would suggest you to consider changing your theme altogether. Because like most modern themes, yours is not probably built to support the function.

Let us now move on to the second method.

2. Adding Infinite Scroll Feature By Using A Plugin

You can add this feature to your site by simply installing a theme that supports the function.
Let us consider the Infinite Scroll Plugin in this case which is a free plugin and can be downloaded directly from your website.

You just need to activate this plugin and start using it to get the feature running. It is a completely customizable plugin that quickly adapts to your site and theme. This plugin is compatible with RSS readers, browsers with Javascript and mobile devices. The best thing about this plugin is that it maintains a local database of various theme presets.

Let us now check out how this theme can be installed and activated on your website. You should, however, know that this plugin works only on the home page and not on the categories or tag/archive pages.

Once you install and activate this plugin, you will see a new menu under your settings tab. This will be reflected in the Infinite Scroll Menu.

Generally, you can start using it, without having to do any changes in the settings. But if your site is a customized one, you might have to change your settings slightly in order to make the plugin work smoothly without any interruption.

For this, you will have to go to the plugins settings page and select the ‘Selectors’ tab.

Under this tab, you will see that the fields are already filled to meet the standards of your theme. Your content is wrapped on the main page with the help of the content selector that is marked as div.

In our case it was #content. This is generally the standard content selector for most of the sites and might be the same for you too. So you can keep this part as it is. It was by default shown as #content div.post in our case.

But many bloggers want to wrap their post with an extra div called .post-container. This has two reasons.

First, when you use this separator, your content and the thumbnail gets split into two different grids. And secondly, it helps load your thumbnails easily.

You can use the plugin with its general settings too. But sometimes it may not load your thumbnail. This might negatively affect your SEO.

If you want to customize how your texts end or loads and how the image loads, you can do all of it under the General Options tab.

Top 5 Plugins To Add Infinite Scroll To Your Blog

Infinite Scroll is not the only plugin that you can use to add the Infinite scroll feature to your blog. There are many other great plugins too, which can be used to make this feature work on your website. Here are the top 5 plugins that you can use for the purpose.

1. JetPack Plugin

Download

If you are not new to WordPress then JetPack must be a very familiar name to you. It is a free, all in one plugin that is loaded with tons of amazing features. Infinite Scroll is just one of them. However, this feature works only with themes that support it.

If your theme does not support it, you will have to add a very simple code to make it work for you. Here is the code that you need to use.


add_theme_support( 'infinite-scroll' , array (
'container' => 'content' ,
'footer' => 'page' ,
) );


This should get your work done. But for those sites that use a theme that supports the feature can download the plugin and activate it directly from the dashboard.

Once that is done you need to activate the Jetpack Infinite Scroll module. This option is available in the Theme Enhancement section under the Settings menu. Here you just need to check the box which says ‘Load more posts as reader scrolls down’. Do not forget to Save your settings.

There you are. Infinite Scrolling feature is activated and ready to be used on your site.

2. DMD Infinite Scroll

Download

DMD Infinite Scroll is a free WordPress plugin that comes with amazing features. You can use this plugin for Ajax loading too if you use WooCommerce on your site. It also paginates up to 10 posts in the same template.

The plugin automatically loads more content as soon as the user reaches the end of the page. It also has a fancy Load More Button which can be used to make people click on it for more content to load. So you can choose from either of the options – whichever suits you the best.

If your site has the e-commerce facility it will make your clients reach the top of the page every-time a product is being replaced. This plugin has multiple sets of settings and can be easily set up on your site.

Once the plugin is installed and activated, you have to go to the DMD Infinite Scroll option in the admin area. There you can select the theme you are using from the presets that will appear in the drop-down arrow.

If your theme is not listed on it, you will have to add the correct selectors.

3. YITH Infinite Scrolling

Download

This is another brilliant WordPress Plugin that can be used to instantly add the Infinite Scroll feature to your site. This plugin comes with the easiest interface for users and has a simple and direct navigation. With more than 8000 active installations this plugin has been one of the most loved plugins for the Infinite Scroll feature.

This is an open source plugin, so if you think an idea can make it even better you can contribute to enhancing its features for the users. With this plugin, you can show more of your content at one go. This plugin comes with a direct and simple navigation so your users are gonna love it.

It is also compatible with mobile devices, so your users will get the same user experience on their mobile devices too. This plugin also offers a smooth transition effect.

To start using this plugin, you just have to install and activate it on your WordPress site. Once that is done, you can activate it right from your dashboard and start enjoying its features.

4. Auto Load Next Post

Download

Just as the name suggests the Auto Load Next Post plugin helps you increase your page views by automatically loading the next post for your readers.

The JavaScript used to design the plugin loads the net post by inserting the content via a special template that matches the theme structure for a single post and places the content underneath the parent post within the main post container.

The JavaScript automatically detects whenever the reader is reading the next post and changes the URL to the one of the current posts. The process is repeated until there is no more post to be loaded. If you have not yet tried this plugin, it’s time you try it.

Sometimes after installing the plugin, you might be asked to integrate the plugin with your theme. This can be easily done by adding a single line of code below your functions.php file and then save it.  Here is the code –

add_theme_support(‘auto-load-next-post’);

However, if you want to use this plugin, you should know one thing. It works on sites that are hosted on WordPress. So you will have to shift from WordPress.com to WordPress.org to be able to use this plugin.

5. Ajax Load More

Download

This is another beautiful plugin that for lazy loading posts, single posts, pages, comments and more with Ajax powered queries. So when you use this plugin, it will load a certain amount of the content first and then slowly load the other section as and when you scroll down.

This plugin also lets you build some complex custom WordPress queries and generate shortcodes to your page through the content editor or directly into the template file.

You can also include multiple instances of Ajax Load more on a single page, post or template. The plugin also has the option to let you manage the repeater template across all sites in the network.

6. Ajax Pagination and Infinite Scroll

Download

Ajax Pagination and Infinite Scroll is a brilliant plugin that simplifies the process of using the feature on your site. This plugin works on your individual pages, posts, searches, custom post types etc.

In this plugin, you have 3 different pagination options to choose from.

The Infinite Scroll option in which the content automatically loads for your visitors as they reach the bottom of the page.

The second option is the Load More Button option where your users will have to click on the Next Button to load more content.

The final option is the normal Pagination option. In this option, your users will experience the pagination effect but the next page will load with Ajax.

This plugin also has the option to query and display multiple sets of posts in the same template and independently paginate them.

Conclusion

Infinite Scrolling is a great feature to keep your readers engaged on your site if used wisely. It not only makes people stay on your pages but also prolongs their stay by providing them continuous content as they read on.

This happens because by using this feature you lower the barrier of the user for getting into the next page. They are also at a higher chance of finding something more interesting. And all of these contributes to a lower bounce rate along with an improved user experience.

So if you want all of these to happen on your site, they try out this feature now. We are sure it will help you take your site to the next level.