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 and

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;

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 class="blog-credits">
            <a href="/privacy-statement/">Privacy statement</a>

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!


9 thoughts on “How to customise Jetpack’s Infinite Scroll footer – the proper way

    1. RavanH Post author

      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 😉

  1. Forest Parks

    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,

    // 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' ); };

    1. RavanH Post author

      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 🙂

      1. Forest Parks

        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.

  2. Forest Parks

    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 );


    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.

    1. RavanH Post author

      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” ?

      1. Forest Parks

        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.

        1. RavanH Post author

          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 🙂


Leave a Reply