Integrated Marketing: Web/Application Design, Multimedia, Print 

LinkedIn E-mail

How to Create a “Sticky” Floating Footer Bar in WordPress

We have been using the floating footer bar on our website for several years now. The idea was inspired from Huffington Post. Ever since the day we put it on our website, we have gotten countless emails from users asking about how we created the floating footer bar. Which plugin are we using. We always reply back saying it is not a plugin. It’s just some simple code. In this article, we will show you how to create a sticky floating footer bar in WordPress.

Note: This is NOT a plugin. It is a basic HTML/CSS tutorial. You must have some understanding of how WordPress themes work in order to follow this tutorial.

How does the Floating Footer Bar look like?

Attaching an image preview just in case you are not familiar with this technique.

Footer Bar Screenshot

Why use the Floating Footer Bar?

You can use it to get more attention to your featured posts, popular posts, email opt-ins or whatever else you like. Sure there are plugins like the HelloBar and many other replicas of the HelloBar. Then there are those slick Wibiya toolbars. The lightbox popup plugin Pippity has their own version of the footer bar as well.

The version we are showing in this article is a lot simpler than all of them. It does not have the option to close. It is a static bar that can rotate content using some very simple jQuery. The main reason why we use it on our website is because it is extremely light-weight and does the job pretty well. If you want advanced functionality like cookie-tracking etc, then we highly recommend you choose one of the other options we mentioned above.

How to Create the Floating Footer Bar in WordPress

Even though we say in the title that this is for WordPress, the concept of the footer bar can be used on any website. All we are doing is creating a div with the CSS property position: fixed; which does the “magic” floating. Then we have a simple jQuery math code that rotates the number of items we add.

Open your footer.php file and add the following codes right before the closing of the body statement above all the scripts.

<div class="fixedBar">
<div class="boxfloat">

<ul id="tips">

<li><a href="http://www.wpbeginner.com/">WPBeginner Link is the First Item</a></li>

<li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li>

</ul>

</div>
</div>

You can add as many list items as you want. Only one item will show up at each page load once we are done with this tutorial. The next step is adding the CSS. Open yourstyle.css file and paste the following code:

/*WPBeginner Footer Bar*/
.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;}

So we have the main fixedBar div. That is where we set the color scheme and other main styling. The most important thing in that class is position: fixed; element. We have the z-index property set very high just so this footer bar doesn’t get messed up. The only thing that will override your footer bar is the youtube embeds. Here is how you can prevent youtube oEmbeds from overriding your content.

We have the opacity set to 0.95 just because we like the little transparency effect. But if a solid block works best with your theme, then feel free to get rid of that.

Because the width of .fixedBar div is 100%, we needed to create a wrap otherwise the content would be aligned left. This is why we have the div .boxfloat. Think of that as a wrap class. Feel free to adjust the width. The #tips list item is set to display: none by default. But we will use jQuery to show one list item randomly on each page load.

Now let’s add our small jQuery code. Open your footer.php file and add this script toward the end. This little snippet will show one list item on each page load out of all the list items you add.

<script type="text/javascript">
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();
});
</script>

Note: you must make sure that you have jQuery being loaded. Most WordPress themes have at least one function that relies on jQuery, so we are pretty confident that your site will already have it. If not, then you would need to load jQuery in the header.

We have tried this script on numerous other sites with several other plugins. We did run into some conflicts. But it was always figured out by adjusting the placement of this script. For example, this may have to be above another script for both of them to work. Or this has to be below the script. Things like those require a lot of trial and error.

If you only want to show one item and not rotate multiple items, then you do not need to add this script. Simply remove display: none property in the CSS tag.

Now what?

Well, there is no backend. Edit your footer.php file to add/remove list items. If you want to get creative, you can create a post loop. Show posts from a specific category. Echo the title and permalink as list items. That would allow you to automate the process. You can also create an options panel in the backend and store post IDs there if you want.

We hope that you find this useful.

Tutorial provided by: wpbeginner.com