Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

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

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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.

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

<ul id="tips">

<li><a href="">WPBeginner Link is the First Item</a></li>

<li><a href=""> is the Second Item</a></li>



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:

/*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();


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.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. henrykene says:

    WpBeginner please i will like to use it for displaying my Adsense ads on mobile views. How will i go about it and what are the code to make it show Adsense stick footer for mobile viewers?

  2. Nawaf says:

    But there is a bug. When you open it in mobile. The ribbon gets cutted. And u can see only half of it

  3. Tip says:

    In my new theme, I have the option of using an infinite scroll feature. This is great except that the reader would have to scroll a long time to reach my old footer, which is where I put the legal disclosures, etc.

    With this floating footer bar, I was able to nicely put the links there and now I can use the infinite scroll feature without having to reposition a bunch of required links.

    Thanks for this tutorial. I learned a little bit more PHP and CSS too!

  4. Sarah Noah says:

    I have a client who wants to have a link to REQUEST A QUOTE on every page so when I saw this sticky footer it seemed perfect until I read that somer users are annoyed by it. Do you guys think REQUEST A QUOTE stuck on the bottom of every page is annoying? Of course it is the most important thing the company wants the user to do.

  5. Roy E says:

    Footer bar shows fine in FireFox but is not sticky in IE11 where I had to scroll down to see “About WPBeginner”, “Site Links”, and “Sites We Like” ??

    • Roy E says:

      Of course, when I pressed Enter on the previous comment ( IE issue), the sticky footer bar appeared. Not sure what happened but the problem went away. Please disregard this comment and the previous one.

  6. yugishtha says:

    do we also have a floating top bar menu plugin for WP?

  7. Hutzel says:

    I tried all, but it does not Show me the fixed footer. Can somebody help or assist me please? thanks

  8. Devendra Meena says:

    Is there any plug in, which can have some scripts on a floating box, and with a x button to close it.

  9. Khushal Rao says:

    this can also be used to showing ads too..

  10. Dick Sijtsma says:

    Lowering the opacity to, for example 0.60 gives the visitor a glimps of the underlying content. I think that would be a nice effect. But changing the opacity of the bar, changes the opacity of the text too. And that ‘dilutes’ the message. Any trick to prevent that?

  11. Jan dB says:

    As mentioned earlier, this is a very easy tutorial and works like a charm on most computers.
    However, I also have issues regarding the mobile browsers.
    Have you already come up with a solution for that?
    Thanks and keep up the good work!

    • Editorial Staff says:

      For mobile browsers if you have a responsive design, then you can simply use media queries and display: none the entire footer bar.

  12. Theresa @DearCreatives says:

    Nice. I am actually looking for a tutorial for adding script to top of post that is there every time I post for disclosure purposes. If you have one like that or know of a plugin can you send me an @DearCreatives on twitter or email me ;) thanks!!

  13. Dick Sijtsma says:

    Hi, looks good, but i do understand the reasons some people dislike these kinds of footers very much. Nevertheless i’m trying to accomplish this effect too.
    In the source of this very page, i saw you externalized the javascript. You’ve put it in the main.js javascript file, and linked this main file to the page in the header.

    So far so good, i can manage that. But, i can’t find the place where the ‘randomtip’ function is called.

    In short my question is: how do i externalize the javascript? Hope to hear from you.

  14. Matthew says:

    Great tutorial. One issue that other might also run into – I only have one footer link (as opposed to having several in rotation) and this footer bar shows even on the page that I link to in the footer. Do you know of a quick way to not show this footer on particular pages? Or to, perhaps, only show it on the homepage?

    • Editorial Staff says:

      Sure just wrap the text with the conditional statement is_front_page().

      • Antonio says:

        Here a true beginner. How do I actually do that? I totally new to WP and PHP. As far as I understand I have to put somewhere in the footer.php but I really have no idea where. Great article though. It managed to add it to my blog as well :)

  15. Caio says:

    I like it, but it is a bit too distracting. Maybe make it nice and light by turning down the opacity, and then adding a style statement on hover to turn the opacity back up to .9

  16. Sopheak says:

    Wow! It was a great tutorial.

  17. Pawan says:

    Great, I was looking for same.

  18. Sai Kumar says:

    Hi, this sticky floating footer bar is really awesome! I am going to add it in my blog for sure. Thanks a lot for Sharing!!

  19. Max Manroe says:

    Wow nice tutorial and think this is great, I will try it to my blog. Thanks

  20. Zseller Istvan says:

    Guys, this is the only thing that I really hate about WpBeginner. When I read your articles on my tablet, with Opera this footer bar stays in the middle of the page for seconds when scrolling. It is a new tablet, and powerful enough. The footer bar covers the content, which is really annoying. After some time it moves to place.

  21. Salman Ahmad says:

    Wow ! This is Awesome ,Thanks for sharing

  22. Peter says:

    Thanks a lot for providing us this great tutorial. Definitely it will be helpful for me.

  23. Amitabha Chakraborty says:


    Nice tutorial. Was thinking a “X” button to close it if it annoys someone would have been great.


  24. David says:

    I like a footer bar. I think its a great place to put social sharing buttons. I made my own on a client’s site but it has the option of being able to close. It also holds the go to the top button. Pretty nifty. However, like the footer bar I made, on my HTC EVO 4G your footer bar doesn’t stick at the bottom as it should. It actually is stuck in the middle of an article and is really annoying because it covers up a bit of the text. The bar I made can be closed so it is only a quick annoyance. Your bar cannot so I can never read that text. Again this is on my phone. If you can figure out the workaround please let me know.

    I came to this article through your newsletter which is great. Thanks for that.

  25. Michael says:

    Like or hate these types of bars, there is great value in seeing how the code is written to implement such a thing, at least. I use Hello Bar and the Wibya bar on several of my sites and although I think some people have become blind to them, including myself, and some hate them, they still work to help convert and share content a lot of the time.

    I appreciate what I view as a helpful little code lesson. Great site!

  26. Taryn Fox says:

    I personally feel that the floating footer bar is an extremely user-hostile feature, especially one like yours which is a) unhideable, and b) expands to twice its intended size (or greater) when viewed while the font size is increased.

    Speaking of which, even with nosquint magnifying the rest of the text on this site, the text in the comments field is tiny and hard to read if you have visual accessibility issues.

    Speaking of other accessibility issues, asking for a person’s “Real Name” is hostile to anyone who uses a pseudonym. This includes trans women, people who are being stalked, people who are hiding their online activity from others who are capable of hurting them, and people who simply prefer and are better known by their pseudonyms than their legal or birth names (both of which are more inclusive and accurate terms for what you call a “real name”).

    Also, you misspelled “meaningful” in the “Add a comment” notice.

    I wasn’t going to leave a long rambling comment of criticism, but I feel most people have banner blindness to footer bars, and are ambivalent towards them at best and annoyed by them at worst. Most people who aren’t web designers, anyway. I thought maybe someone should speak up for the people who are actually affected by them. Then I ran into the other issues once I went to your site from Google Reader, and tried to leave a comment.

    Thank you for your tutorials, and I hope things go well for you.

    • Editorial Staff says:

      Hey Taryn,

      We really appreciate your invaluable feedback. There are definitely pros and cons to having a floating footer bar like this ones. The cons you have already pointed out. We thought about doing a cookie tracking option where regular users can close the bar and never have it shown again. But even the regular users sometime miss out on great deals because of that. Also if they clear their browser’s cache or use a different computer, the bar shows up again. Yet another downside of cookie tracking. We’ve given extensive thoughts of having user registration and offer personalization on the site.

      As for comments, the real name text in the field is there to serve one purpose, stop spammers. If you read the comments policy, it says “We do not allow Keywords stuffed in the name field. You must use your name or nick name for commenting.” Often folks use their nicknames, and we are completely ok with it. But if your nickname is “best insurance company” or something like that… then we mark it as spam.

      Thanks for pointing out the typo. We have fixed that.

      • Partha Bhattacharya says:

        This is with respect to Taryn’s comment above:

        “…I feel most people have banner blindness to footer bars, and are ambivalent towards them at best and annoyed by them at worst.”

        Since you continue using them there is no doubt you get benefits from them, and people do click on them to remain updated just as I did just now…coming here from another page.

        Would you mind sharing some stats / lookins as to how effective is the footer bar for you, and also how effective it is as against using a header bar!

  27. staion says:

    Thanks for this easy and amazing small tutorials! I’ve already implemented it on my site, but without the jquery thing, just using it as announcements.

  28. FreedomJackson says:

    Awesome thanks for sharing this dude I’m doing some updating and I was trying to find a good way to add this footer bar.

    mucho grande gracias senior

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.