WordPress: customizing the Jetpack Infinite Scroll Footer plugin module

Ryan

10 years ago

Wordpress: condividere nuovamente gli articoli condivisi con Jetpack Publicize

WordPress 4.1 is now live! With the brand-new Twenty Fifteen theme widely adopted by many blog and websites, the Infinite Scroll Jetpack module is becoming more and more popular (if you don't know what we're talking about you can read here to know more about this neat plugin).

As you might already know, the Infinite Scroll module features a standard Footer with the blog name on its left side and the "Proudly powered by WordPress theme <nome del tema>" phrase on its right side. If you don't like their content you can change it with few lines of code.

To change the contents of the right side you can simply add this custom Filter (if you don't know what a Filter is or how to add it to your WP website read here):

/**
* Custom Filter to replace footer credits for JetPack Infinite Scroll
**/
function my_infinite_scroll_credit(){
    return '<div>custom HTML text <a href="http://www.google.com/" target="_blank">with a link to Google</a>.</div>';
}
add_filter('infinite_scroll_credit','my_infinite_scroll_credit');

/**

* Custom Filter to replace footer credits for JetPack Infinite Scroll

**/

function my_infinite_scroll_credit(){

return '<div>custom HTML text <a href="http://www.google.com/" target="_blank">with a link to Google</a>.</div>';

}

add_filter('infinite_scroll_credit','my_infinite_scroll_credit');

In order to change the left side of the Infinite Footer a few more lines of code will be needed:

/**
* Custom Infinite Footer for Jetpack Infinite Scroll.
*/
function my_custom_infinite_footer() {
?>
<div id="infinite-footer">
    <div class="container">
        <div class="blog-info">
            LEFT SIDE HTML CONTENT
        </div>
        <div class="blog-credits">
            RIGHT SIDE HTML CONTENT
        </div>
    </div>
</div>
<?php
}

/**
* Custom Filter to replace the JetPack Infinite Scroll Footer
**/
function my_infinite_scroll_settings( $args ) {
if ( is_array( $args ) )
    $args['footer_callback'] = 'my_custom_infinite_footer';
    return $args;
}
add_filter( 'infinite_scroll_settings', 'my_infinite_scroll_settings' );

/**

* Custom Infinite Footer for Jetpack Infinite Scroll.

function my_custom_infinite_footer() {

LEFT SIDE HTML CONTENT

</div>

RIGHT SIDE HTML CONTENT

</div>

<?php

}

/**

* Custom Filter to replace the JetPack Infinite Scroll Footer

**/

function my_infinite_scroll_settings( $args ) {

if ( is_array( $args ) )

$args['footer_callback'] = 'my_custom_infinite_footer';

return $args;

}

add_filter( 'infinite_scroll_settings', 'my_infinite_scroll_settings' );

The above code is a bit more complex than the previous one. We're still using a custom Filter, but we'll use it to launch a custom function who will change the whole footer content.

If you don't want to mess with your template source code and/or you don't feel like adding custom Filters and functions to your template code you can obtain the same result with the following JavaScript function (requires jQuery): you can append it to the end of your page's <head> block (Appearance -> Edit > header.php):

<script style="text/javascript">
$(function() {
    var f = $("div#infinite-footer");
    f.find(".blog-info").html("LEFT SIDE HTML CONTENT"); 
    f.find(".blog-credits").html("RIGHT SIDE HTML CONTENT"); 
});
</script>

$(function() {

var f = $("div#infinite-footer");

f.find(".blog-info").html("LEFT SIDE HTML CONTENT");

f.find(".blog-credits").html("RIGHT SIDE HTML CONTENT");

});

</script>

If you just want to hide the Infinite Footer all you need to do is to add the following css rule (Appearance -> Edit CSS > style.php):

body div#infinite-footer { 
    display: none;
}

body div#infinite-footer {

display: none;

}

Happy customization!

Print Friendly & PDF Download