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...

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






blogging,255,computing,705,ebook,53,ebooks,354,freebies,358,graphics,225,IFTTT,3,internet,207,mobile,252,news,99,sharedtutor,78,slider,2,video tutorials,5,VideoHive,1156,YouTube,1005,
SharedTutor Tutorials For Everyone: Enabling Infinite Scroll for WordPress Theme [WordPress Tip]
Enabling Infinite Scroll for WordPress Theme [WordPress Tip]
SharedTutor Tutorials For Everyone
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy