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? Screenshot 2013-12-05 at 23.56.03 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:

11 Comments

Hi @WPMoxie glad the info served you well. By the way, it looks like we’re partly in the same business of turning designers work into WP themes 😉

This is awesome and a big help but I have a question you may be able to help with.

My new footer is taller than the default footer so I need to amend some of the JS and I don’t want to edit the core file.

Do you think there is a way of overwriting this part of the js with a new function?

/**
* The infinite footer.
*/
Scroller.prototype.thefooter = function() {
var self = this,
width;

// Check if we have an id for the page wrapper
if ( $.type( this.footer.wrap ) === “string” ) {
width = $( ‘body #’ + this.footer.wrap ).outerWidth( false );

// Make the footer match the width of the page
if ( width > 479 )
this.footer.find( ‘.container’ ).css( ‘width’, width );
}

// Reveal footer
if ( this.window.scrollTop() >= 350 )
self.footer.animate( { ‘bottom’: 0 }, ‘fast’ );
else if ( this.window.scrollTop() < 350 ) self.footer.animate( { 'bottom': '-50px' }, 'fast' ); };

Hi Forest,

To replace the script and stylesheet files from the Infinite Scroll module with your own, you can do the following. Please note that I’m supposing here that you are working with a custom/child theme. If not, be aware that these changes will be lost after updating the theme!

1. First copy both the infinity.js and infinity.css files over to your theme directory.
2. Then place the following code in your themes functions.php

function my_infinite_scroll_enqueue() {
// Replace plugin script
wp_dequeue_script( 'the-neverending-homepage' );
wp_enqueue_script( 'the-neverending-homepage', get_stylesheet_directory_uri().'/infinity.js', array( 'jquery' ), '20140507', true );
// Replace plugin default styles
wp_dequeue_style( 'the-neverending-homepage' );
wp_enqueue_style( 'the-neverending-homepage', get_stylesheet_directory_uri().'/infinity.css', array(), '20140507' );
}
add_action( 'wp_enqueue_scripts', 'my_infinite_scroll_enqueue', 9 );

3. Then test if infinite scroll is still functioning like before (code above is untested so might have bugs!)
4. Modify the infinity script and stylesheet inside your theme dir to your hearts content without fear of losing the mods on the next plugin update!

Let me know how it works out 🙂

Thanks for this! Makes sense. I’ve tried dequeueing and for some reason it’s not removing them. Might be the order it’s executing in I guess!

Need to sleep right now but will get back onto it tomorrow and report back.

Ok, so I got it working. I had to change the order with another js file being loaded and also had to change

wp_enqueue_script( ‘the-neverending-homepage’, get_stylesheet_directory_uri().’/infinity.js’, array( ‘jquery’ ), ‘20140507’, true );

to

wp_enqueue_script( ‘the-neverending-homepage-1′, get_stylesheet_directory_uri().’/infinity.js’, array( ‘jquery’ ), ‘20140507’, true );

to stop it just reloading the .js from the plugin!

Thanks for your help.

Hi Forest, thanks for reporting back 🙂 and you’re right, the script slug should be different… What did you exaclty do to “change the order with another js file being loaded” ?

I actually removed it from it’s previous enqueue function and added it to this one below the infinity.js

I’m so glad I found your post, helped me solve this problem. Took me a while to work out the changes I needed for the infinity.js too (too get the footer to trigger at the right time) but looks like I am all there now.

I actually removed it from it’s previous enqueue function and added it to this one below the infinity.js

Maybe simply removing the 9 in the add_cation call, or replacing it with 11 (or higher) might have done the trick too. Like:

add_action( 'wp_enqueue_scripts', 'my_infinite_scroll_enqueue', 11 );

Anyway, glad to hear you worked it out and thanks again for sharing 🙂

Many thanks for this. It’s much better to change or remove the Jetpack infinite scroll popup footer with a child theme modification than by editing the plugin files directly.

For whatever it’s worth, the footer function I created is empty to remove it completely. I hope this helps somebody.

add_theme_support( ‘infinite-scroll’, array(
‘container’ => ‘top’,
‘type’ => ‘scroll’,
‘wrapper’ => ‘true’,
‘footer’ => ‘false’,
‘footer_widgets’ => ‘false’,
‘footer_callback’ => ‘no_jetpack_footer’
) );
// (replace Jetpack’s annoying popup footer)
function no_jetpack_footer() { ?>

<?php }

Hi Jeremy, thanks for sharing 🙂

Have you tried a simpler

add_theme_support( ‘infinite-scroll’, array(
‘container’ => ‘top’,
‘type’ => ‘scroll’,
‘wrapper’ => ‘true’,
‘footer’ => ‘false’,
‘footer_widgets’ => ‘false’,
‘footer_callback’ => ‘__return_false’
) );

so there is no need for an addition empty function? I’ve not tested it but it might be just a tiny bit lighter 😉

Leave a Reply to RavanH Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.