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.
Method 1: 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.
<div class="fixedbar"> <div class="boxfloat"> <ul id="tips"> <li><a href="https://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. 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.
/*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;
}
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() . 'https://cdn.wpbeginner.com/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.
Method 2: Using OptinMontser to Add Floating Footer Bar in WordPress
OptinMonster is a popular lead generation plugin that works on all websites. It helps you convert website visitors into subscribers and customers.
One of the features OptinMonster has is a floating header and footer bar that you can use to display an email optin form as well as to promote single links / offers.
The benefit of using this method is:
- Easy to Setup (no code)
- You can show custom floating bars on different pages / categories of your website.
- You can use it to build your email list as well as promote offers.
The only downside is that OptinMonster is a paid service. But you can use our OptinMonster Coupon: WPB10 to get 10% discount on any OptinMonster plan.
After you have purchased OptinMonster (Plus or Pro plan), you can use the OptinMonster WordPress API plugin on your site. For more details, see our step by step guide on how to install a WordPress plugin.
This plugins just acts as a connector between your WordPress site and OptinMonster.
Upon activation, the plugin will add a new menu item labeled OptinMonster to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.
You will be asked to provide your OptinMonster API username and key. You can get these keys from your OptinMonster account.
Copy and paste the keys into the plugin settings and click on ‘Connect to OptinMonster’ button. The plugin will now connect your WordPress site to your OptinMonster account.
Next, you need to click on the ‘Create New Optin’ button.
This will take you to ‘Create New Optin’ page on OptinMonster website.
First you need to provide a title for your Optin Campaign and select a website where you will be using this optin. If your site is not listed then click on ‘Add a new website’ link.
Next, you can click on the Floating bar under the ‘Select your optin type’ to use templates available to use as a floating bar.
You can customize all these templates to your own liking. Select the one that looks closest to what you have in mind.
As soon as you select a template, OptinMonster will launch their design customizer. It is a point-and-click builder where you can configure appearance and settings for your optin.
When you are done configuring the appearance of your optin, be sure to click on the save button.
While these are called optins, they don’t always have to be. You can use the Yes / No feature to add the button to view a blog post or claim a special discount.
When you first create your floating bar, it’s Paused by default.
Once you’ve finished configuring it, hover over to the status bar in the top menu and choose Start Campaign.
Your floating bar is now ready to be added to your WordPress site.
Return to the admin area of your WordPress site and visit OptinMonster » Optins. You will see your optin listed here. If you don’t see it, then click on Refresh Optins button and the plugin will display it.
Click on the ‘Edit output settings’ link to continue.
On the next page, check the box next to ‘Enable optin on site’ option and then click on the save settings.
You can also use the Advanced option to only show the floating bar on specific posts, pages, categories, and other areas.
That’s all, floating footer bar optin is now live on your WordPress site.
We hope this article helped you add a floating footer bar to your WordPress site. You may also want to see these actionable tips to drive traffic to your WordPress site.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Steve Alvi says
Please I want a close button with this footer floating bar.
WPBeginner Support says
OptinMonster would be the method that allows you to have a close button the easiest.
Admin
Trendy Avinash says
Worked Like a Charm,Without any Plugins.
Thanks
WPBeginner Support says
Glad our guide was helpful
Admin
Alejandro Ferguson says
The floating footer code really works. Thank u
WPBeginner Support says
Glad our guide could help set it up
Admin
John SMith says
How to add a FB sharing button in a floating bar in the only mobile, not for desktop.
WPBeginner Support says
You would want to take a look into option 2 in our social media plugins here: https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Admin
wlepcha says
How to add menus in the sticky footer instead of random ads.
WPBeginner Support says
You would want to take a look at our article here: https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/
Admin
Marius says
Very nice tutorial. I implemented the manual code and worked like a charm. Only one more feature I need… can we also have a X or close button to close the floatingbar and remain like this for the rest of the visit? I know, cookies are involved, but maybe you can give us a simple solution. Thank you!
Greg Guz says
Very clear and east to follow tutorial.
Floating bar seem to work absolutely fine, but I’m getting following error in chrome console:
Failed to load resource: the server responded with a status of 404 ()
Any ideas?
Ankush jain says
Very helpful your website
thank you very much
Mark Rowles says
Just a quick pointer CSS wont work for this.
You’ve got fixedBar in the html as a class name (capital B) and you’ve got fixedbar in the css (lowercase b) so the css doesn’t apply.
Can someone correct the code please to help others that discover this post?
WPBeginner Support says
Hey Mark,
Thanks for pointing this out. We have updated the code.
Admin
Robi says
Dear WPBeginner, and Friends
If I have specific section that I’ve created using Elementor Page Builder, How I can use it as a custom sticky footer? (It contains more than one column, some buttons and text). I want this type of sticky footer, Instead of simple text as explained in this tutorial.
Thanks..
Daniel says
1) Added code just before the tag in the footer.php from my theme dir /wp-content/themes/mytheme/
2) Added code to my theme dir /wp-content/themes//mytheme/style.css not working deleted and then i try to added from the theme option to custom css menu same problem not working
3) Added floatingbar.js with the code inside in /wp-content/themes/mytheme/js
4) Added code to functions.php first not working.. tried with site-specific plugin also same thing
I tried on both website different theme same problem not working just sit there it`s not floating
Some help will be welcome… I really need this
WPBeginner Support says
Hey Daniel, try using Inspect tool to troubleshoot any issue with CSS.
Admin
Daniel says
Thanks for the replay but for me messing with css and js it`s like building a space ship… i will give a try to figure out whats rong
Regards
Daniel
Daniel says
I used the inspector tools and i don`t see any read lines there….
Dueadla Framin says
I have the same issue! The code you posted isn’t even working on default twenty sixteen theme. It’s not floating it’s just stuck on the bottom of the webpage after you scroll all the way to the bottom.
Igor says
there is an error in the fixedBar reference in the css code (it is referencing as “.fixedbar” whereas it should be “.fixedBar”. Change that and see if it works.
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?
Nawaf says
Awesome.
But there is a bug. When you open it in mobile. The ribbon gets cutted. And u can see only half of it
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!
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.
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.
yugishtha says
do we also have a floating top bar menu plugin for WP?
Hutzel says
I tried all, but it does not Show me the fixed footer. Can somebody help or assist me please? thanks
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.
Khushal Rao says
this can also be used to showing ads too..
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?
Thanks.
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.
Admin
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!!
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.
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().
Admin
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
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
Sopheak says
Wow! It was a great tutorial.
Pawan says
Great, I was looking for same.
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!!
Max Manroe says
Wow nice tutorial and think this is great, I will try it to my blog. Thanks
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.
Editorial Staff says
We are working on a mobile/tablet version. This won’t be an issue soon enough.
Admin
Salman Ahmad says
Wow ! This is Awesome ,Thanks for sharing
Peter says
Thanks a lot for providing us this great tutorial. Definitely it will be helpful for me.
Amitabha Chakraborty says
Hi
Nice tutorial. Was thinking a “X” button to close it if it annoys someone would have been great.
Regards
Amitabha
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.
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!
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.
Admin
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!
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.
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