Do you want to create a sticky floating footer bar in WordPress? We have been using the floating footer bar on our website for many years because it helps us reduce bounce rate and increase pages viewed by users. Many of you have asked us how to create a similar floating bar, so here it is. In this article, we will show you how to create a sticky floating footer bar in WordPress.

What is Floating Footer Bar?

A sticky floating footer bar allows you to prominently display your important content to users. This bar remains visible to users at all time, so they are more likely to click on it and discover more useful content.

You can use the floating footer bar to:

  • Drive more clicks to other blog posts
  • Build your email list
  • Bring attention to special offers / sale

In this article, we will show you two methods to add a sticky floating footer bar on your WordPress site. One uses a plugin while the other is a code method that we’re using on WPBeginner. You can choose the one you find easier to use.

Manually Create Sticky Floating Footer Bar in WordPress

This method requires you to add code in your WordPress files. If you are new to adding code, then please take a look at our guide on how to paste snippets from web into WordPress.

First, you need to connect to your WordPress site using an FTP client or file manager in cPanel.

In your FTP client, you need to locate the footer.php file in your WordPress theme folder and download it to your desktop. It would be located at a path like this:

/wp-content/themes/your-theme-folder/

Next, you need to open the footer.php file in a plain text editor like Notepad and add the following code just before the </body> tag.

&amp;amp;amp;lt;div class="fixedbar"&amp;amp;amp;gt;
&amp;amp;amp;lt;div class="boxfloat"&amp;amp;amp;gt;
 
&amp;amp;amp;lt;ul id="tips"&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href="https://www.shapeofweb.com/"&amp;amp;amp;gt;SOW Link is the First Item&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href="http://www.wordpress.org/"&amp;amp;amp;gt;WordPress.org is the Second Item&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;/ul&amp;amp;amp;gt;
 
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;

You can add as many list items as you want. We will show you how to randomly rotate them on each page load.

The next step is adding the CSS styles.

You can add CSS to your WordPress theme’s style.css file or use the Simple Custom CSS plugin.

.fixedbar {
background: #000; 
bottom: 0px; 
color:#fff; 
font-family: Arial, Helvetica, sans-serif; 
left:0; 
padding: 0px 0; 
position:fixed; 
font-size:16px; 
width:100%; 
z-index:99999; 
float:left; 
vertical-align:middle; 
margin: 0px 0 0; 
opacity: 0.95; 
font-weight: bold;
}
.boxfloat {
text-align:center; 
width:920px; 
margin:0 auto;
}
 
#tips, #tips li {
margin:0; 
padding:0; 
list-style:none
}
#tips {
width:920px; 
font-size:20px; 
line-height:120%;
}
#tips li {
padding: 15px 0; 
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

After adding the CSS, you may not be able to see the changes on your website. This is because we have set the display for items in our list to none.

Next, we will use jQuery to randomly display one item from our list on each page load.

You need to open a plain text editor like Notepad on your computer and add this code to a blank file:

(function($) {
this.randomtip = function(){
    var length = $("#tips li").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#tips li:nth-child(" + ran + ")").show();
};
 
$(document).ready(function(){   
    randomtip();
});
})( jQuery );

Once you are done, you need to save this file as floatingbar.js on your desktop.

Now open your FTP client and connect to your web server. Go to your theme folder and locate js folder. It would be at a path like this:

/wp-content/themes/your-theme-folder/js

If there is no js folder in your theme directory, then you need to create one.

Now you need to upload floatingbar.js file you created earlier to the js folder you just created.

The next step is to enqueue (load) the JavaScript file in your WordPress theme.

Paste this code in your theme’s functions.php file or a site-specific plugin.

function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

That’s all, you can now visit your website to see the floating footer bar in action. Reload the page a couple of times to see footer bar randomly showing different items from your list.

The benefit of using this method is that you get to randomly rotate multiple links in the floating footer bar like we’re doing.

However the difficulty is that you need to add code. Furthermore, you can’t use this floating bar for other things without doing too much CSS customizations.