Enabling Infinite Scroll for WordPress Theme [WordPress Tip]


In the Web, Infinite Scroll means concept of loading the subsequent content continuously because users scrolling on the next paragraphs. So long as there exists still content available scrolling will keep showing the following line of content. You can find this type of experience implemented inside the Twitter and Facebook and a lot of other sites.

If you might have reason to implement a similar experience on your website, and if you built your web site with WordPress, we're going to show you how you can do enable infinite scrolling.

Installing Jetpack

Although there are several plugins and methods to realize Infinte Scroll, I prefer using one from Jetpack. Jetpack is really a plugin produced by Automattic - the guys behind WordPress. It contains a set of plugins to supply your blogging experience, including the Infinite Scroll.

This feature was first introduced in version 2.0. However, unless you are using TwentyTen, TwentyEleven, and TwentyTwelve - the default WordPress themes, the feeling might not immediately visible inside your theme. Since every theme includes a unique page structure, Jetpack requires a piece of your theme information because of it to work.

First, make certain that Jetpack is installed and also the Infinite Scroll is activated, as follows.

Adding Infinite Scroll Function

Similar to adding Post Thumbnail, Infinite Scroll is added with add_theme_support() function, and also this is one of the reasons I prefer using Jetpack on the other options, as it's well integrated using the WordPress Core function.

In this situation, I’m while using free WordPress theme from ThemeZilla, Launch.

First, we should instead create a function for specifying the post template that is to be used by Infinite Scroll to append the content. In this case, we're going to call content-post-standard.php for your template.

 function zilla_infinite_scroll_render()  get_template_part( 'content-post', 'standard' );  

Then, we could enable Infinite Scroll using this method.

 add_theme_support( 'infinite-scroll', array( 'container' => 'primary', 'render' => 'zilla_infinite_scroll_render', )); 

The content parameter inside the above code specified the id which has our posts. In this case, the Launch theme wraps the posts within id="primary".

While the render parameter specifies web site on which this content should be formatted. At this point, the consequence should already be visible within your posts whenever you reload your site.

But, observe that the footer is currently overlaying on the posts.

If this really is something that will not sit well together with your theme design, you can set the type parameter to click, so that this content should not be appended prior to the users click a button.

 add_theme_support( 'infinite-scroll', array( 'type' => 'click', 'container' => 'primary', 'render' => 'zilla_infinite_scroll_render', )); 

Jetpack will append the button for users to click as a way to show the subsequent content.

Final Thought

This is simply a basic implementation of Jetpack Infinite Scroll. For most cases, this will sufficed. But, if you want to go heightened, you'll be able to head over to these page at Jetpack.

Related posts:

  1. Freebie Release: “Bare Responsive” - A blank and responsive WordPress Theme

  2. How to add WordPress Related Posts Without Plugins

  3. How to Customize WordPress Editor Styles

  4. Installing Google Custom Search Engine (CSE) on WordPress Site

Title Post: Enabling Infinite Scroll for WordPress Theme [WordPress Tip]
Rating: 100% based on 99998 ratings. 5 user reviews.
Author: SharedTutor

Thank you for visiting sharedtutor.com, If there is criticism and suggestions please leave a comment

About The Author

Someone who always wanted to know about the beauty of the world :)