How to customise Jetpack’s Infinite Scroll footer – the proper way

Browsing the interwebs for info on how to change the footer that comes with the Infinite Scroll module in Jetpack I found, to my horror, several how-to’s that all involved hacking core plugin files. This is, obviously, not right. You’ll be modifying Jetpack files after each update (and these seem to be quite regular) untill the end of days… So here is the right way™ of doing it.

Please note, this how-to is not about how to get the Infinite Scroll footer working in your theme. There are many other posts about that. If you’re looking for those, I can recommend starting with http://jetpack.me/support/infinite-scroll/ and http://ottopress.com/2012/jetpack-and-the-infinite-scroll/.

Now let’s say you’re past those steps or you’ve got a Twenty Something child theme where Infinite Scroll just works out of the box, and suppose you’ve even made it look nice with your theme with some custom CSS. But… You’re not happy with the default links with your site name, “Proudly powered by WordPress” plus your theme name that appear in the footer? Then read on 🙂

Change the credits only

If you only want to change or replace the credits on the right side, then there is a nice filter available. This basic example will serve you well:

/**
* Replace footer credits for JetPack Inifite Scroll
**/
function my_infinite_scroll_credit(){
    $content = '<a href="/privacy-statement/">Privacy statement</a>';
    return $content;
}
add_filter('infinite_scroll_credit','my_infinite_scroll_credit');

Sadly, for the site title with scroll-to-top link on the left side there is no such filter available… There is, however, a way to replace the whole Infinite Scroll footer!

Change the whole footer

The steps here involve (1) adding a function that will render your alternative footer and (2) letting Infinite Scroll know that it should use that function instead of its own. So it’s not much harder than replacing the credits only. It’s just not been well documented. Let’s change that, shall we?

First, we start with an alternative footer function in our themes functions.php:

/**
* Replace footer for Jetpack Infinite Scroll.
*/
function my_footer() {
?>
<div id="infinite-footer">
    <div class="container">
        <div class="blog-info">
            <a href="/copyright/">&copy; 2013-<?php echo date('Y'); ?> <?php bloginfo('name'); ?></a>
        </div>
        <div class="blog-credits">
            <a href="/privacy-statement/">Privacy statement</a>
        </div>
    </div>
</div>
<?php
}

Next, we tell Infinite Scroll about our new footer. If you’re working on a child theme where the parent theme already has Infinite Scroll support then we can do this by using the filter ‘infinite_scroll_settings’ like this:

function my_infinite_scroll_settings( $args ) {
if ( is_array( $args ) )
    $args['footer_callback'] = 'my_footer';
    return $args;
}
add_filter( 'infinite_scroll_settings', 'my_infinite_scroll_settings' );

But if you’re working on your own theme it will be easier to just add the ‘footer_callback’ parameter to the add_theme_support( ‘infinite-scroll’ ) array that you should already have in your functions.php (if not, please see the links at the beginning of this post) so it will look something like this:

add_theme_support( 'infinite-scroll', array(
    'container' => 'content',
    'footer' => 'page',
    'footer_callback' => 'my_footer'
) );

Enjoy your new Infinite Scroll footer!

Sources:

• http://plugins.svn.wordpress.org/jetpack/tags/2.6.1/modules/infinite-scroll/infinity.php
• http://themeshaper.com/2013/10/08/how-to-override-jetpack-infinite-scroll-settings-in-a-child-theme/
• http://www.limecanvas.com/customising-the-jetpack-infinite-scroll-footer/