Customising the JetPack Infinite Scroll Footer

This post shows you how to customise the contents of  the JetPack Infinite Scroll Footer module for WordPress.

Our previous post covered how to set-up your theme for use with the JetPack Infinite Scroll (IS) module and contains good background information.  Please read that first.

The footer that comes with the IS module has two parts to it and unfortunately only allows you to customise one part.

Pop-up Footer

The footer is made up of two parts, left and right with a white opaque background.

The left side is for the “blog-info” and will, out-of-the-box, contain the name of your blog and a link to go back to the top of the page.

The right side is for the “blog-credits” and out-of-the-box will show the following information:

“Proudly powered by WordPress.  Theme: <theme name>.”, where <theme name> is the name of your active theme.

Only the right part of the footer, the “blog-credits” can be customised without hacking the code.  Yes – I’ll show you how to hack this later on 🙂

The Footer Code

I showed you how to style the footer in the previous Infinite Scroll post, so we won’t repeat that here.

The code for the IS footer can be found around line 825 in v1.1 of the following file:

/plugins/jetpack/modules/infinite-scroll/infinity.php

[gist id=8142833 file=code-snippet-1.php]

I’ll highlight the parts we’ll be badgering around with.

Lines 20 and 21 set up the content that will be put into the “blog-copyright” HTML DIV (area) defined in lines 32-34.  This is what’s shown in the RHS part of the IS footer.

Line 22 is what we are interested in however and contains a WordPress filter apply_filter().

You can read up on what WordPress filters are in your spare time but to summarise, the apply_filter() function will let you make a change to whatever the function is filtering.

In this case, the apply_filter() function is making changes to the $credits variable via an as yet undefined function called infinite_scroll_credit.

So lines 20 and 21 set up a bit of standard text in the $credits variable, “Proudly powered by WordPress.  Theme: <theme name>.” and line 22 allows us to override this by using our own filter function.  Neat huh?

I wish more developers used filters!

How to use the Filter to change the Footer Credits?

In order to change the contents of the $credits variable and hence the credits section of the footer, we have to write a small function in our functions.php file.

Add the following to that file:

[gist id=8142833 file=code-snippet-2.php]

Here we are adding (creating) a new filter with the same name that the IS footer function uses in its apply_filter() function infinite_scroll_credit and pointing it at our own function.

Line 4

uses the add_filter() function to create a new filter and point it at our function called lc_infinite_scroll_credit().
Essentially we’re telling WordPress to run our function called lc_infinite_scroll_credit() when applying the filter infinite_scroll_credit.

Lines 6-9
define our new function and return a new value.  This value will be returned to the $credits variable in the IS footer() function.

The function above simply adds a link to our Privacy Statement page, mimicking our regular footer page.

That’s that.  You can place anything you want in your new function.  Happy days!

What about Customising the Blog Info Area?

Unfortunately the IS footer function doesn’t allow us to change the “blog-info” LHS area and that just won’t do.

If we can change the “blog-credits” area using a WordPress filter then can’t we do the same for the “blog-info” area too?

Damned right we can!

[lc-warning-box]Before going any further you need to know that we are going to change a core plugin file.  Any changes you make will get wiped out when the plugin is updated.  The changes will have to be reapplied after the update.[/lc-warning-box]

In case you are wondering, I have submitted this following code to the plugin authors for their consideration to include it in the next release of JetPack.
Fingers crossed 🙂

To cut a long story short, here’s our replacement footer() function.  Overwrite the one in /plugins/jetpack/modules/infinite-scroll/infinity.php

[gist id=8142833 file=code-snippet-3.php]

It’s almost the same as the original function but with a few modifications badgered into it.

We have added lines 24, 25 and changed line 33.

Line 24
creates a new variable called $home_link and sets the default to a link to the homepage using the name of the blog.

Line 25
applies a new filter called infinite_scroll_home_link to modify the $home_link variable if called.

Line 33
replaces the hard-coded link in the original function with our new variable $home_link and it’s modifiable content.

Now all you have to do is add a new filter for infinite_scroll_home and a custom function in your functions.php file to change the content to whatever you like.

Happy code badgering!