If you are looking for a way to display both content and some form of newsletter, advertisement or menu, a floating sticky bar is a good way to do this. It allows your visitors to read your content in full, whilst also showing them what else you have to offer.
Let’s look at how you can create a floating bar on your WordPress website.
What is a floating bar in WordPress?
Put simply, a sticky floating bar is a type of banner that stays pinned to your reader’s display even when they scroll up and down the page. Whilst a popup takes up a large part of your screen and can frustrate users, a sticky floating bar only takes up a small area and can be placed anywhere, so it’s a less invasive option (though pop-ups can work well too in the right scenario).
They can be a great way to present important or relevant content to users and staying visible on their screens, or in some cases, they can just be used for advertisements. They’re great for promotions and email sign-ups, and you usually have the option to set them on a per-page or whole site basis.
Normally, website users have to scroll to the bottom of the page to find the relevant information. With the help of a sticky bar, the relevant information is always displayed so that users can easily reach the desired content
And because this bar remains visible when they scroll, users are more inclined to click on it and visit the landing page. This is ideal for increasing the number of views and directing more visitors to a specific page, especially the main page.
How to create a “sticky” floating bar in WordPress
We’re going to look at two methods in this article – one requires some coding knowledge, the other is a plugin method.
Method 1: Creating a “sticky” floating footer bar with manual coding
This method uses a standard WordPress function to create a floating footer. You will need to have some coding knowledge to paste the code from the web into WordPress.
First, connect your WordPress website to an FTP client or a file manager in the cPanel. Then locate the footer.php file in your WordPress theme folder and download it to your PC. You can find the folder in a path like this:
/wp-content/themes/your-theme-folder/
Once you have found the footer.php folder, open it in a simple text editor and add the following code 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>
In the next step, add CSS to the style.css file of your WordPress theme to customize the floating footer.
1 /*WPBeginner Footer Bar*/
2
3 .fixedbar {
4 background: #000;
5 bottom: 0px;
6 color:#fff;
7 font-family: Arial, Helvetica, sans-serif;
8 left:0;
9 padding: 0px 0;
10 position:fixed;
11 font-size:16px;
12 width:100%;
13 z-index:99999;
14 float:left;
15 vertical-align:middle;
16 margin: 0px 0 0;
17 opacity: 0.95;
18 font-weight: bold;
19 }
20 .boxfloat {
21 text-align:center;
22 width:920px;
23 margin:0 auto;
24 }
25
26 #tips, #tips li {
27 margin:0;
28 padding:0;
29 list-style:none
30 }
31 #tips {
32 width:920px;
33 font-size:20px;
34 line-height:120%;
35 }
36 #tips li {
37 padding: 15px 0;
38 display:none;
39 }
40 #tips li a{
41 color: #fff;
42 }
43 #tips li a:hover {
44 text-decoration: none;
45 }
Don’t worry if nothing changes on your website afterwards – this is because we have set the display elements in our list to none.
To display the elements of our list randomly each time the page loads, you will need to continue with jQuery.
To do this, simply open a text editor, such as Notepad, and paste this code into an empty file.
1 (function($) {
2 this.randomtip = function(){
3 var length = $("#tips li").length;
4 var ran = Math.floor(Math.random()*length) + 1;
5 $("#tips li:nth-child(" + ran + ")").show();
6 };
7
8 $(document).ready(function(){
9 randomtip();
10 });
11 })( jQuery );
Once the code has been successfully implemented, you need to save the file as floatingbar.js on your device. Next, you need to locate the file in your theme folder. The folder path could look like this:
/wp-content/themes/your-theme-folder/js
If there is no js folder in your theme directory, simply create one.
Upload the floatingbar.js file to your js folder. The very last step is to integrate the JavaScript file into your WordPress theme.
Paste the following code into your functions.php file and you can see how your floating footer bar works.
1 function wpb_floating_bar() {
2 wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
3 }
4 add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );
A big advantage of this method is that it can randomly swirl multiple links in the floating bar depending on your settings. The disadvantage, however, is that too many CSS customizations have to be made in addition to a large number of codes.
If this method is a little too complex, you can opt to use the plugin method in the next section.
Method 2: Creating a “sticky” floating footer with a plugin
There’s a variety of different sticky bar plugins you can use with WordPress, with one of the most popular plugins being FireBox. It’s mainly known for enabling users to create pop-ups, but it’ll also give you the ability to place a floating sticky bar in the header or footer of your WordPress website.
The first step is to download and install the FireBox. Simply search for FireBox and then install the FireBox Popup Builder from FirePlugins as shown in the screenshot below.
After activation, navigate to your FireBox Dashboard
Then, select the New Popup option at the top of the page and a FireBox popup library will appear on your screen.
In the FireBox Popup Library, enter “floating bar” and choose a floating bar template to your liking.
You will then be redirected to a settings page where you can customize and design the floating bar.
Here you can change the dimensions of the bar (width and height), the text color and position, the background color and other shadow options. If you want to customize the frame or overlay, you can easily do this with the FireBox plugin.
In addition, pop-up animations, e.g. for opening and closing, are also available.
If you want to change the way the floating bar is displayed on your website, you can make some changes in the Behavior tab. More specifically, the settings help you to define the workflow of the bar.
In the settings for your Trigger Point, you decide how the floating bar should be displayed. For example, it can be displayed automatically when the page is loaded or when a visitor clicks on a section. The floating bar can also be triggered manually via HTML or JavaScript, which are available in the Lite version.
In popup mode, you can choose to display your floating bar as a popup that appears on top of all other elements and is placed according to your choice. You can also present your floating bar as a page slide, which is not positioned consistently but scrolls along with the visitors.
Once you are done with the customization and design, you can then decide where you want to show the sticky bar under Publishing Rules.
In the Lite version, you can apply a rule to show or hide your floating bar when a visitor browses a specific menu or URL. If you want to set a rule to display the bar on a specific date, time period or for registered users by their roles or ID, you should use the Pro version.
Once you have set the rules, you can create a floating bar on your WordPress website.
Conclusion
A floating bar is a great way to increase traffic to your landing pages and it can draw visitors’ attention to your ongoing promotions or offers, and overall create a better website user experience.
We’ve looked at two ways to set up a floating footer bar in WordPress; the first requires some coding knowledge, the other is a plugin method that creates a custom floating bar for your website.
