Written by on

Builder, Jetpack & Infinite Scroll

Jetpack recently released an update that added many new features to your self-hosted WordPress site. One of these features is the addition of Infinite Scroll. Unlike many of the other features in Jetpack, this feature has to be enabled by the theme. Since Builder is constructed unlike any other theme, we need to provide some additional information for Infinite Scroll to work.

Builder Infinite Scroll Plugin

For those of you that do not want to go through the setup of this feature, not to worry. I did the heavy lifting for you and created a plugin that does all of this. You can download the Builder Infinite Scroll plugin from your member panel (for current Builder license owners). Simply install and activate the plugins (Builder Infinite Scroll & Jetpack), make sure Infinite Scroll is enabled in your Jetpack settings and start scrolling!

Want a more customized output? Read on.

Enabling Infinite Scroll

Enabling Infinite Scroll is similar to adding support for Builder’s responsive features and post thumbnails. By adding theme support for Infinite Scroll and providing some arguments, Infinite Scroll can easily integrate with Builder.

Here is a basic setup to add to your theme’s functions.php file.

add_theme_support( 'infinite-scroll', array(
	'container' => 'builder-infinite-scroll',

The container is the HTML element that wraps around your posts and is the main part of adding Infinite Scroll to your Builder theme. Infinite Scroll searches for the HTML element with this ID and adds posts there. Since Builder does not add an ID around this container (usually class=”loop-content”), you will need to modify your theme (index.php & archive.php) and add the ID yourself.

<div class="loop-content">
	<div class="post>...</div>
	<div class="post>...</div>
	<div class="post>...</div>


<div class="loop-content" id="builder-infinite-scroll">
	<div class="post>...</div>
	<div class="post>...</div>
	<div class="post>...</div>

The second part of Infinite Scroll is the content that renders when the posts load. By default, Infinite Scroll looks for the content.php in the theme’s root directory. Since Builder does not have a content.php you will need to add a function to tell Infinite Scroll what content to load.

Some of Builder’s Child Themes do have a content.php and you will not need to add a function for those.

Here is a sample of what could be added to mimic Builder’s default post output:

function builder_infinite_scroll_content() {
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<!-- title, meta, and date info -->
			<div class="entry-header clearfix">
				<h3 class="entry-title">
					<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

				<div class="entry-meta">
					<?php printf( __( 'By %s', 'LION' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
					<?php do_action( 'builder_comments_popup_link', '<span class="comments">&middot; ', '</span>', __( 'Comments %s', 'LION' ), __( '(0)', 'LION' ), __( '(1)', 'LION' ), __( '(%)', 'LION' ) ); ?>

				<div class="entry-meta date">
					<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
					<span class="month"><?php the_time( 'F' ); ?></span>
					<span class="day"><?php the_time( 'j' ); ?><span class="day-suffix"><?php the_time( 'S' ); ?></span><span class="day-comma">,</span></span>
					<span class="year"><?php the_time( 'Y' ); ?></span>

			<!-- post content -->
			<div class="entry-content clearfix">
				<?php the_content( __( 'Read More&rarr;', 'LION' ) ); ?>

			<!-- categories, tags and comments -->
			<div class="entry-footer clearfix">
				<?php do_action( 'builder_comments_popup_link', '<div class="entry-meta alignright"><span class="comments">', '</span></div>', __( 'Comments %s', 'LION' ), __( '(0)', 'LION' ), __( '(1)', 'LION' ), __( '(%)', 'LION' ) ); ?>
				<div class="entry-meta alignleft">
					<div class="categories"><?php printf( __( 'Categories : %s', 'LION' ), get_the_category_list( ', ' ) ); ?></div>
					<?php the_tags( '<div class="tags">' . __( 'Tags : ', 'LION' ), ', ', '</div>' ); ?>
		<!-- end .post -->

We need to modify the add_theme_support to tell Infinite Scroll what to render.

add_theme_support( 'infinite-scroll', array(
	'container' => 'builder-infinite-scroll',
	'render'    => 'builder_infinite_scroll_content',

Now when someone scrolls to the bottom of your posts on you blog and archive pages, the scroll will be continuous as the posts begin to load.

So, get your scroll on!




Save 40% off site-wide through December 31! Get the coupon