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

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:

border:0;
background:0;

 

Remove these:

background:rgba(255,255,255,.8);
border-color:#ccc;
border-color:rgba(0,0,0,.1);
border-style:solid
border-width:1px 0 0;

 

The modified class should now look like this:

infinite-footer .container{
background:0;
border:0;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0 auto;
overflow:hidden;
padding:1px 20px;
width:780px;
}

 

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

.link-up{
color:#fff;
float:right;
font-size:1.7em;
}

.link-up:a{
text-decoration:none;
}

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

 

Remove:

$credits = '<a href="http://wordpress.org/" 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' ); ?>

with:

<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="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

 

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

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

 

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>
     </a>
    </div>
   </div>
  </div><!-- #infinite-footer -->
 <?php
}

 

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!

Share!

Simple php guestbook script – Free download

I didn’t have anything better to do today so I decided to learn a little bit how to communicate with MYSQL databases using PHP. With this wonderful tutorial to help me I was able to construct a very basic guestbook script in about 4 hours. I know it shouldn’t take that long, but please keep in mind that this is my first ever attempt to create something like this with MYSQL and PHP.

Here’s a screenshot of the actual guestbook in action:

Ynef's random script screenshotAs you can see it’s very basic, nothing fancy.

You might notice that the title of my guestbook is ynef.net/b. Well, at first I wanted to create something similar to 4chan, but right now there is no option to post images- only text replies. I might add the option to browse and post images in the future when I learn more PHP.

What wasn’t mentioned in the above tutorial:

First of all if you follow the tutorial I mentioned above your script will work, but it will post an empty message every time someone visits or refreshes the page. To counter this I added if ($post != ”) right before the part where new posts are inserted into the MYSQL database.

This is a simple if statement that makes sure to only continue when the variable $post is not empty. Oh and don’t forget to put the code that inserts stuff into your database inside these brackets { }.

 

Another thing I added was the date of the post: $today = date(“F j, Y, g:i a”); Now you just have to echo the date variable $today along with your post.

 

I also tried making the guestbook a little bit more secure. By default if you follow the tutorial I mentioned your guestbook will be vulnerable to Cross Site Scripting attacks. In other words a bad person can submit malicious code along with his post and the next time someone visits the page that code will run. I looked into this briefly and I believe I was able to secure the guestbook by making sure that tags like <html> and <script> etc. are getting excluded when echoing the posts. It was really easy to implement with strip_tags();

 

Downloading and installing the free guestbook script

Download file: random.zip

 

Installing notes:

 

1. Open install.php in notepad and change the database variables to your own MYSQL database values

2. Upload install.php into your web directory and run it in your browser

3. Delete the install.php from your web directory

4. Open index.php in notepad and change the database variables to your own MYSQL database values

You can also change the title within the <title> tags and the guestbook name within the <h1> tags.

Yeah, I guess I could have just put the variables in one simple config file and included it in both install.php and index.php, but I was just too lazy.

5. Now upload both index.php and style.css to your web folder

 

If you followed the above steps then your guestbook should be working. If not please let me know!

 

*EDIT* Let’s see if spam robots find the guestbook: http://www.ynef.net/b/

Share!