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

Do you need to create a sticky floating footer bar in WordPress? We have now been utilizing the floating footer bar on our web site for a few years as a result of it helps us cut back bounce price and enhance pages seen by customers. Lots of you will have requested us tips on how to create the same floating bar, so right here it’s. On this article, we’ll present you tips on how to create a sticky floating footer bar in WordPress.

What’s Floating Footer Bar?

A sticky floating footer bar means that you can prominently show your vital content material to customers. This bar stays seen to customers in any respect time, so they’re extra more likely to click on on it and uncover extra helpful content material.

You should use the floating footer bar to:

  • Drive extra clicks to different weblog posts
  • Construct your electronic mail checklist

On this article, we’ll present you two strategies so as to add a sticky floating footer bar in your WordPress website. One makes use of a plugin whereas the opposite is a code technique that we’re utilizing on GyanHiGyann. You possibly can select the one you discover simpler to make use of.

Technique 1: Manually Create Sticky Floating Footer Bar in WordPress

This technique requires you so as to add code in your WordPress information. In case you are new to including code, then please check out our information on tips on how to paste snippets from internet into WordPress.

First, you might want to connect with your WordPress website utilizing an FTP consumer or file supervisor in cPanel.

In your FTP consumer, you might want to find the footer.php file in your WordPress theme folder and obtain it to your desktop. It will be positioned at a path like this:

/wp-content/themes/your-theme-folder/

Subsequent, you might want to open the footer.php file in a plain textual content editor like Notepad and add the next code simply earlier than the </physique> tag.

1
2
3
4
5
6
7
8
9
10
<div class="fixedbar">
<div class="boxfloat">
<ul id="tips">
<li><a href="https://www.GyanHiGyann.com/">GyanHiGyannLink 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 possibly can add as many checklist objects as you need. We’ll present you tips on how to randomly rotate them on every web page load.

The following step is including the CSS kinds.

You possibly can add CSS to your WordPress theme’s fashion.css file or use the Easy Customized CSS plugin.

1
2
3
4
5
6
7
8
9
10
<div class="fixedbar">
<div class="boxfloat">
<ul id="tips">
<li><a href="https://www.GyanHiGyann.com/">GyanHiGyann 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*GyanHiGyann 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 including the CSS, it’s possible you’ll not be capable of see the adjustments in your web site. It is because we now have set the show for objects in our checklist to none.

Subsequent, we’ll use jQuery to randomly show one merchandise from our checklist on every web page load.

You could open a plain textual content editor like Notepad in your laptop and add this code to a clean file:

1
2
3
4
5
6
7
8
9
10
11
(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 );

As soon as you might be performed, you might want to save this file as floatingbar.js in your desktop.

Now open your FTP consumer and connect with your internet server. Go to your theme folder and find js folder. It will be at a path like this:

/wp-content/themes/your-theme-folder/js

If there isn’t a js folder in your theme listing, then you might want to create one.

Now you might want to add floatingbar.js file you created earlier to the js folder you simply created.

The following step is to enqueue (load) the JavaScript file in your WordPress theme.

Paste this code in your theme’s features.php file or a site-specific plugin.

1
2
3
4
function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

That’s all, now you can go to your web site to see the floating footer bar in motion. Reload the web page a few instances to see footer bar randomly displaying totally different objects out of your checklist.

The good thing about utilizing this technique is that you just get to randomly rotate a number of hyperlinks within the floating footer bar like we’re doing.

Nonetheless the issue is that you might want to add code. Moreover, you may’t use this floating bar for different issues with out doing an excessive amount of CSS customizations.

Technique 2: Utilizing OptinMontser to Add Floating Footer Bar in WordPress

OptinMonster is a well-liked lead era plugin that works on all web sites. It helps you exchange web site guests into subscribers and clients.

One of many options OptinMonster has is a floating header and footer bar that you need to use to show an electronic mail optin kind in addition to to advertise single hyperlinks / presents.

The good thing about utilizing this technique is:

  • Simple to Setup (no code)
  • You possibly can present customized floating bars on totally different pages / classes of your web site.
  • You should use it to construct your electronic mail checklist in addition to promote presents.

After you will have bought OptinMonster (Plus or Professional plan), you need to use the OptinMonster WordPress API plugin in your website. For extra particulars, see our step-by-step information on tips on how to set up a WordPress plugin.

This plugins simply acts as a connector between your WordPress website and OptinMonster.

Upon activation, the plugin will add a brand new menu item labeled OptinMonster to your WordPress admin bar. Clicking on it’s going to take you to plugin’s settings web page.

You may be requested to supply your OptinMonster API username and key. You will get these keys out of your OptinMonster account.

Copy and paste the keys into the plugin settings and click on on ‘Hook up with OptinMonster’ button. The plugin will now join your WordPress website to your OptinMonster account.

Subsequent, you might want to click on on the ‘Create New Optin’ button.

It will take you to ‘Create New Optin’ web page on OptinMonster web site.

First you might want to present a title to your Optin Marketing campaign and choose an internet site the place you’ll be utilizing this optin. In case your website just isn’t listed then click on on ‘Add a brand new web sitehyperlink.

Subsequent, you may click on on the Floating bar underneath the ‘Choose your optin kindto make use of templates obtainable to make use of as a floating bar.

You May Also Like : How to Start an Online Store in 2020 (Step by Step)

You possibly can customise all these templates to your individual liking. Choose the one that appears closest to what you keep in mind.

As quickly as you choose a template, OptinMonster will launch their design customizer. It’s a point-and-click builder the place you may configure look and settings to your optin.

When you find yourself performed configuring the looks of your optin, make sure to click on on the save button.

Whereas these are known as optins, they don’t at all times need to be. You should use the Sure / No function so as to add the button to view a weblog submit or declare a particular low cost.

Once you first create your floating bar, it’s Paused by default.

When you’ve completed configuring it, hover over to the standing bar within the prime menu and select Begin Marketing campaign.

Your floating bar is now able to be added to your WordPress website.

Return to the admin space of your WordPress website and go to OptinMonster » Optins. You will note your optin listed right here. Should you don’t see it, then click on on Refresh Optins button and the plugin will show it.

Click on on the ‘Edit output settings’ hyperlink to proceed.

On the following web page, examine the field subsequent to ‘Allow optin on websitechoice after which click on on the save settings.

It’s also possible to use the Superior choice to solely present the floating bar on particular posts, pages, classes, and different areas.

That’s all, floating footer bar optin is now dwell in your WordPress website.

We hope this text helped you add a floating footer bar to your WordPress website. You may additionally need to see these actionable tricks to drive site visitors to your WordPress website.

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

  1. Pingback: How to Add Your WordPress Blog to Apple News ( Easily )

Leave a Comment

Your email address will not be published. Required fields are marked *