How to add infinite scrolling to your WordPress theme

If you’ve ever visited a social networking site like Facebook, Twitter or Google+, you might have already seen the infinite scrolling feature. It is one of the powerful strategies to keep users hooked on a website by providing fresh content as the near the “end” of what they have seen right now - hence infinite scrolling. This option is available to implement on any Wordpress site - your don't need such things as a Wordpress page scroll plugin or other plugin to implement this.


Add Infinite Scrolling to you wordpress themeWhenever a visitor approaches the “bottom” of the site, it gets automatically loaded or refreshed with new contents. As a user, you never miss out of any content unless you stop scrolling down - whilst as a provider, you keep providing your user with content keeping them hooked - whilst at the same time your website stays FAST. This is because you are not loading all the content at once. Infinite scrolling makes a lot of sense for Wordpress websites which are image heavy, but it works well for any type of website too.

As a publisher, adding infinite scroll or unlimited scrolling to your Wordpress website can open many new opportunities. Here are a few reasons why you might also consider using it on your website.

  1. It can make your visitors spend more time on your website.
  2. It provides greater convenience for your users to view more content from your website as it doesn’t require them to click on any button for viewing more content.

Add infinite scrolling to your WordPress site

For WordPress publishers, the easiest way to add infinite scrolling is by enabling the infinite scroll module from the Jetpack plugin. If your WordPress theme is a well crafted one like the default WordPress themes, your theme can also support infinite scrolling.

With most Wordpress themes you can add infinite scrolling to your website as follows.

Step #1: Install Jetpack plugin if you haven’t had it on your website yet.

Step #2: Enable infinite scrolling module from the Jetpack.

 infinite scroll

Step #3: Add the following code to the functions.php file for enabling the infinite scroll feature for your theme.

add_theme_support( 'infinite-scroll', array(

   'container'=> 'content',

   'footer'=> 'page',

) );

Tweaking infinite scroll

One of the common issues of infinite scrolling is that the visitors can not access the footer of a page, no matter how far they scroll down. This is because new content and pages are being loaded at the bottom - replacing the footer.

The best thing about using Jetpack’s infinite scrolling is by default, it will add a fixed footer that slides in once you start scrolling down the page. Though, it might be a cool feature to have on your website you can always disable it if needed.

Here are a few tweaks you can do with your Jetpack infinite scroll.

add_theme_support( 'infinite-scroll', array(

   'type'       => 'scroll',

   'footer_widgets'=> false,

) );

Explanation of the tweaking code snippet

  • type: Type can access two different values: scroll and click. While click shows a ‘load more posts’ button when a user approaches the bottom, the type scroll will automatically load new pages.
  • footer_widgets: Either a boolean true or false can be used if the footer should always or never be shown respectively.

Over to you

Infinite scrolling allows users spend more time on your website and gives the ability to quickly see or read more of your posts from the website - so more than likely they will find something interesting for them.  That being said, infinite scroll is not a right choice for every website, especially the one that focuses more on call to action rather than the time being spent.

Would you like to add an option for making infinite scroll support to your theme? What are your thoughts on it? Comment below and let us know what you think.

Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now


Want to supercharge your website?

  Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion VPS servers - click here to see our full review. We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for CollectiveRay visitors + FREE domain! Click the button below to grab a bargain. (This is a limited offer - so get it while it lasts)