WordPress Jetpack Infinite Scroll and the Thematic Framework

Jetpack is a great set of plugins that now comes bundled with WordPress. One of those plugins, Infinity Scroll, removed the need to page through posts by automatically loading more posts on pages like your blog, archives or categories.

This post is specifically about adding support for Jetpack Infinity Scroll to the WordPress Thematic Framework.

First off you’ll need to create a child theme for Thematic. Creating a child theme for Thematic is fairly simple, if you need more info you can search the web for “How to Create a Thematic Child Theme”, there are plenty of great tutorials online about the subject or you can go here for a post I’ve written on the subject.

Install Jetpack and Activate Infinity Scroll

Next you’ll need to make sure you have the Jetpack plugin installed and activated. Then you need to go to the Jetpack option page, located on the left hand menu when logged into you WordPress install and activate Infinity Scroll.

For more about Infinity Scroll’s options visit the plugins homepage, but for this post, here’s what’s important when adding support for Infinity Scroll to Thematic. “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.”

Thematic doesn’t use content.php so we need to create our own render function.

Infinity Scroll’s homepage goes on to say “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.”

Even though Thematic doesn’t work with Infinity Scroll out of the box it’s pretty simple to get it up and running. Everything you need is already included in Thematics library, all you need to do is copy and paste Thematics main index loop, and remove a few lines.

But first lets set up infinity Scroll in are Thematic Child Theme.

Set Up Infinity Scroll for Thematic

Open up function.php in your child theme and past in the following code.

add_theme_support( 'infinite-scroll', array(
    'type'           => 'scroll',
    'footer_widgets' => false,
    'container'      => 'content',
    'wrapper'        => true,
    'render'      => 'my_child_infinite_scroll_render',
    'posts_per_page' => false
) );
// Custom Infinity Scroll Loop
function my_child_infinite_scroll_render() {
    // Our Custom Loop goes here!!!
};

If you’re building a child theme for someone else and don’t know if the widgets in the footer of Thematic will be used, you’ll want to register them. More info on the Infinity Scroll Homepage. Look at the Twenty Eleven section for an example on registering widgets. Otherwise you can set ‘footer_widgets’ to true or false. If set to false post will load automatically, if set to true users will need to click a button to load more post.

Adding Thematics Loop to Infinity Scroll

Thematics index loop can be found in the content-extentions.php file: Thematic/library/extensions/content-extensions.php
The main index loop can be found on line 608 (as of 1.0.3.2) function thematic_index_loop() {}

Here’s what’s important to us.

// Count the number of posts so we can insert a widgetized area
$count = 1;
while ( have_posts() ) : the_post();
    // action hook for inserting content above #post
    thematic_abovepost();
    ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?> > 
        <?php
            // creating the post header
            thematic_postheader();
        ?>
        <div class="entry-content">
            <?php thematic_content(); ?>
            <?php wp_link_pages(array('before' => sprintf('<div class="page-link">%s', __('Pages:', 'thematic')), 'after' => '</div>')); ?>
        </div><!-- .entry-content -->
        <?php thematic_postfooter(); ?>
    </div><!-- #post -->
    <?php 
        // action hook for insterting content below #post
        thematic_belowpost();
        comments_template();
        if ( $count == thematic_get_theme_opt( 'index_insert' ) ) {
            get_sidebar('index-insert');
        }
        $count = $count + 1;
endwhile;

Copy it to you clipboard and paste it into the my_child_infinite_scroll_render function you just created in your function.php file

There are a few lines we need to get rid of. If you’re using Thematics built in index widgets it would be pretty annoying to have the same widgets loaded over and over again. So we need to get rid of the widgets and the counter that tells the index_insert which post it should be inserted after

Delete the lines that contain the following: thematic_abovepost(); thematic_belowpost(); comments_template(); The entire if() statement at the bottom and $count = $count + 1;

The final code in you functions.php should end up looking like this:

add_theme_support( 'infinite-scroll', array(
    'type'           => 'scroll',
    'footer_widgets' => false,
    'container'      => 'content',
    'wrapper'        => true,
    'render'      => 'my_child_infinite_scroll_render',
    'posts_per_page' => false
) );
// Custom Infinity Scroll Loop
function my_child_infinite_scroll_render() {
    while ( have_posts() ) : the_post();
        ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?> > 
            <?php
                // creating the post header
                thematic_postheader();
            ?>
            <div class="entry-content">
                <?php thematic_content(); ?>
                <?php wp_link_pages(array('before' => sprintf('<div class="page-link">%s', __('Pages:', 'thematic')), 'after' => '</div>')); ?>
            </div><!-- .entry-content -->
            <?php thematic_postfooter(); ?>
        </div><!-- #post -->
        <?php
    endwhile;
};

That’s pretty much it. Save your functions.php file, reload your blog page, scroll to the bottom of the page and you should see posts loading in automatically.

If you’re not using footer widgets and decided to load post automatically keep reading to learn how to change the Infinity Scroll footer.

Change the Footer Credits in WordPress Jetpack Infinite Scroll

This part isn’t specific to Thematic and should work in any theme using Infinity Scroll.

If you open up the php file for Infinity Scroll you’ll see there’s a filter that will let use change the text in the footer that Infinity Scroll automatically creates.

The filter can be found here: plugins/jetpack/modules/infinite-scroll/infinity.php
Line 886 (as of version 1.1)

$credits = apply_filters( 'infinite_scroll_credit', $credits );

Paste the following into your functions.php file and replace “MY CUSTOM CONTENT!!!” with whatever you’d like.

function my_infinite_scroll_credit(){
     $content = 'MY CUSTOM CONTENT!!!';
     return $content;
}
 
add_filter('infinite_scroll_credit','my_infinite_scroll_credit');

There you have it, if you have any questions leave them in the comments below or check out the Thematic forums.

You can see it in action on the homepage of this site.