How to make your theme support Jetpack’s Infinite Scroll feature

As you known, JetPack is one of most popular installed plugins. I’ve recommended JetPack as must active plugins after start new WordPress blog. The Infinite Scroll module in JetPack detecting when a user gets to the bottom of a page that contains a list of posts and automatically checks for and loads in the next  lot of posts instead pagination. Unlike many of the modules already in Jetpack, Infinite Scroll only works with themes that support it.

Since each theme is constructed a bit differently, the Infinite Scroll module needs information about the theme to function properly.

Making Infinite Scroll work with your theme

Enabling Infinite Scroll is very similar to adding support for post thumbnails or editor styles because they make use of add_theme_support().

add_theme_support('infinite-scroll', array(
    'type'           => 'scroll',
    'footer_widgets' => false,
    'container'      => 'content',
    'wrapper'        => true,
    'render'         => false,
    'posts_per_page' => false
));

You will at the very least need to add this basic code to your functions.php file in your active theme folder. By providing a few key pieces of information when calling add_theme_support(), Infinite Scroll will seamlessly integrate with your theme.
With that you get a fully functioning infinite scroll experience.

• type accepts two different values: scroll or click. This controls the default Infinite Scroll behaviour. scroll will cause posts to be loaded automatically when the visitor approaches the bottom of the current list of posts, while click shows a Load more posts button, letting the user control when more posts are loaded.
• footer_widgets argument accepts a variety of values and indicates whether or not a theme has footer widgets. If footer widgets are present, the scroll type will be set to click so the widgets are accessible. Look back to type: scroll is the default, but if a theme has footer widgets, this could be overridden to click so the widgets are accessible. At its simplest, either a boolean true or false can be set if the footer should always or never be shown, respectively.
• wrapper argument behaves similarly to footer_widgets, in that it accepts a few different values. This argument determines whether or not each set of additional posts is contained within a <div> element when appended to the container specified in the preceding argument.
  If a boolean value (true or false) is specified, either a <div> with the class infinite-wrap is placed around the additional posts, or it isn’t.
  To wrap the posts in a <div> with a custom class, set the wrapper argument to a string representing the custom class.
• render: Infinite Scroll uses a standard WordPress loop to render the additional posts it appends, and utilizes template parts in the content-{post format}.php form. If a theme includes at least content.php, then the render argument can be omitted. Below is the default rendering function Infinite Scroll uses:

  while(have_posts()) {
      the_post();
  
      get_template_part('content', get_post_format());
  }

  If greater customization is needed, or a theme doesn’t use the content template parts, a function name should be specified for the render argument and that function will be used to generate the markup for Infinite Scroll. The function must include the while() portion of WordPress’ loop and can utilize any function available to the theme when it renders posts.

• posts_per_page: By default, the type argument controls how many posts are loaded each time Infinite Scroll acts. For the scroll type, seven (7) posts are loaded each time Infinite Scroll is activated. For the click type, a site’s Blog pages show at most value found under Settings → Reading is used.

Packing JetPack with your theme

I will show you how to packing JetPack’s Infinite Scroll feature with your theme.
Create jetpack.php file:

/**
 * Jetpack Compatibility File
 * See: http://jetpack.me/
 *
 * @package NARGA
 */

/**
 * Add theme support for Infinite Scroll.
 * See: http://wwww.narga.net/how-to-make-your-theme-support-jetpacks-infinite-scroll-feature/
 */

function narga_jetpack_setup() {
    add_theme_support('infinite-scroll', array(
        'footer'    => 'footer-info',
        'type'           => 'scroll',
        'footer_widgets' => false,
        'container'      => 'main-content',
        'wrapper'        => true,
        'render'         => false,
        'posts_per_page' => false
   ));
}
add_action('after_setup_theme', 'narga_jetpack_setup');
?>

Including it into your theme by adding the code below to your theme’s functions.php:

/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/path/to/your/jetpack.php';

Notes: The code above is compatible with NARGA WordPress Theme, when you using with your theme, don’t forget to find your container ID and footer ID.

Customizing the JetPack Infinite Scroll Footer

If the Infinite Scroll type is scroll, you will see their build-in footer appearing float when scrolling the page.

The footer that comes with JetPack’s Infinite Scroll has two parts to it and unfortunately only allows you to customise one part.

• The left side is for the blog-info and will, out-of-the-box, contain the name of your blog and a link to go back to the top of the page.
• The right side is for the blog-credits and out-of-the-box will show the following information: Proudly powered by WordPress. Theme: {theme name}., where {theme name} is the name of your active theme.

Look into /plugins/jetpack/modules/infinite-scroll/infinity.php, at line 914 you will see:

	/**
	 * Render default IS footer
	 *
	 * @uses __, wp_get_theme, get_current_theme, apply_filters, home_url, esc_attr, get_bloginfo, bloginfo
	 * @return string
	 */
	private function default_footer() {
		$credits = 'Proudly powered by WordPress ';
		$credits .= sprintf(__('Theme: %1$s.', 'jetpack'), function_exists('wp_get_theme') ? wp_get_theme()->Name : get_current_theme());
		$credits = apply_filters('infinite_scroll_credit', $credits);

		?>
		

			

				

					
						
					
				
				

					
				
			
		

In order to change the contents of the $credits variable and hence the credits section of the footer, we have to write a small function in our functions.php file.

add_filter('infinite_scroll_credit', 'narga_filter_jetpack_credit');

function narga_filter_jetpack_credit() {
return 'NARGA - Ideas & Inspiration!';
}

You can hide your regular footer and navigation links, and show them again when Infinite Scroll is finished.

/* Hides navigation links and site footer when infinite scroll is active */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
    display: none;
}
/* Shows the footer again in case all posts have been loaded */
.infinity-end.neverending #footer {
    display: block;
}

Integrating Infinite Scroll with the Genesis Framework

Add this code to your theme’s functions.php file.

/**
 * Add support for JetPack infinite scroll
 **/
function lc_infinite_scroll_init() {
 add_theme_support('infinite-scroll', array(
 'container' => 'content',
 'footer' => 'footer',
 'render' => 'genesis_do_loop'
));
}
add_action('after_setup_theme', 'lc_infinite_scroll_init');

JetPack Infinite Scroll with jQuery plugin: Masonry

What is Masonry?

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

You will find too hard to include masonry with Infinite Scroll. But I found a solution to combie it into one:

jQuery(document).ready(function($) {
     infinite_count = 0;
     // Triggers re-layout on infinite scroll
     $(document.body).on('post-load', function () {
	infinite_count = infinite_count + 1;
	var $container = $('#content');
	var $selector = $('#infinite-view-' + infinite_count);
	var $elements = $selector.find('.hentry');
	$elements.hide();
	$container.masonry('reload');
	$elements.fadeIn();
     });
});

Currently, Jetpack is a little buggy with the URL pushStates and masonry. To make it works, you need disabled the URL PushState with:

'wrapper' => false,
'render' => false,

Conclusion

On the whole, it’s a clever module to add to Jetpack. That should be enough to get you started with using the JetPack Infinite Scroller module. If you happen to be using one of those themes, you can enable the Infinite Scroll module and enjoy this new feature immediately.