How to customize Jetpack’s Infinite Scroll footer and style the “scroll to top” link

July 10, 2015 1:52 am Published by Leave your thoughts

Jetpack comes with a great feature called Infinite Scroll that adds Facebook style scrolling of content to your website, meaning that more posts are loaded as the reader scrolls down the page.

The only thing that sucks about the Infinite Scroll is the footer style. By default you’ll get a semi-transparent white box under your website that says: “Proudly powered by WordPress” along with the theme name you are currently using.

Here’s how to remove the default footer and replace it with a subtle arrow icon that’s pointing upwards.

Warning! You will be editing the Jetpack system files directly which means that any updates to the plugin will overwrite the customization.

Open jetpack/css/jetpack.css

Find this class:

infinite-footer .container


And add this into it:



Remove these:

border-width:1px 0 0;


The modified class should now look like this:

infinite-footer .container{
margin:0 auto;
padding:1px 20px;


Add two new classes after it (this is the place to style your arrow):



That’s it for the CSS. Now lets edit some PHP!


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

Find this function:

private function default_footer()



$credits = '<a href="" rel="generator">Proudly powered by WordPress</a> ';
$credits .= sprintf( __( 'Theme: %1$s.', 'jetpack' ), function_exists( 'wp_get_theme' ) ? wp_get_theme()->Name : get_current_theme() );
$credits = apply_filters( 'infinite_scroll_credit', $credits );


A few lines down replace:

<div class="blog-info">

with this:

<div class="link-up">


Go down another line or two and replace:

<?php bloginfo( 'name' ); ?>


<i class="fa fa-arrow-circle-o-up"></i>

Note! I am using Font Awesome for this arrow. For this to work on your website, you have to reference the Font Awesome library somewhere between your <head> and </head> tags. Simply copy the following and paste it inside your <head>

<link rel="stylesheet" href="//">


Yet another line or two below find and remove this entire div along with its contents:

<div class="blog-credits">
  <?php echo $credits; ?>


The modified function should now look like this:

private function default_footer() {
  <div id="infinite-footer">
   <div class="container">
    <div class="link-up">
     <a id="infinity-blog-title" href="<?php echo home_url( '/' ); ?>" rel="home">
      <i class="fa fa-arrow-circle-o-up"></i>
  </div><!-- #infinite-footer -->


And that’s it. The only two files you need to edit are jetpack.css and infinity.php and you will finally be able to replace that ugly white footer box with something a lot more nicer!

If you don’t use Font Awesome anywhere else on your website, you might want to consider not using it at all for this one arrow icon, because including libraries can lower your page loading speed.

You can use a .png image for example. Just replace the <i class=”fa fa-arrow-circle-o-up”></i> with an image!


In category: , ,

This post was written by ynef