Wordpress

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?

Just look at this article. There should be a floating footer bar on this page. Attaching an image preview just in case if we decide to remove it in the future.

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.

01 <div class="fixedBar">
02 <div class="boxfloat">
03
04 <ul id="tips">
05
06 <li><a href="http://www.wpbeginner.com/">WPBeginner Link is the First Item</a></li>
07
08 <li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li>
09
10 </ul>
11
12 </div>
13 </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 your style.css file and paste the following code:

01 /*WPBeginner Footer Bar*/
02 .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;}
03
04 .boxfloat{text-align:center; width:920px; margin:0 auto}
05
06 #tips, #tips li{margin:0; padding:0; list-style:none}
07
08 #tips{width:920px; font-size:20px; line-height:120%;}
09
10 #tips li{padding: 15px 0; display:none}
11
12 #tips li a{color: #fff;}
13
14 #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.

01 <script type="text/javascript">
02 this.randomtip = function(){
03     var length = $("#tips li").length;
04     var ran = Math.floor(Math.random()*length) + 1;
05     $("#tips li:nth-child(" + ran + ")").show();
06 };
07
08 $(document).ready(function(){  
09     randomtip();
10 });
11 </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. We’d love to hear your thoughts in the comments.

Support: We do not provide FREE support on tutorials like these. So please do not post support questions in the comments. If there is a bug, then feel free to comment. Also, if you are using a theme framework like Genesis, Thesis, etc, then you would need to familiarize yourself with their hooks and filters. Because that is the only way you will get this thing to work. We recommend asking all framework specific questions in their support forum.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s