Page 1

Simple Way to Create “Sticky” Floating Footer Bar in WordPress Guided by: How to Create a Floating Footer Bar in WordPress


What is floating footer bar? A Sticky Floating Footer Bar allows you to display your important contents to users. So users can click on it and find useful content. It is very helpful to decrease bounce rate and increase the viewed pages for the users. You can use it to make your email lists or get more clicks on the other page or to bring attention for a sale/special offer.


Creating Sticky Floating Footer Bar in WordPress There are two methods to create Sticky Floating Footer Bar in your WordPress website. In the first method, we will create it manually. In the second method,we will use OptinMonster plugin for creating floating footer bar in WordPress. You can choose one method which one you can use easier.


Method 1 :Creating Manually For this method, you have to add code to your WordPress file. You need to connect your website in cPanel by using FTP client or file manager. In your FTP client, you need to search the footer.php in your WordPress theme folder and download it on your desktop. Now, open footer.php file in any text editor and add the code before the body tag. In your next step, you have to add CSS code. You can use custom CSS plugin or add CSS to a style.css file of your WordPress theme. If You do not set the display for any item in your list then you can not see the changes in your website. For this we will use JQuery. Open a text editor and add the JQuery code and save it as floatingbar.js.


Now, open your FTP client and connect to your web server. Go to the theme folder and search the js folder. You have to upload floatingbar.js file to the WordPress theme. Now your next step is load the javascript file to the WordPress theme. Paste the code into function.php of your theme file. Now, you can see the floating footer bar on your WordPress website. The advantage of this method that you can see many link randomly in the floating footer bar. If you use this method, you have to add the code and you can’t use this for other things without doing CSS optimization.


Mehod 2: By Using OptinMonster It is very popular lead generation plugin. It helps to convert all website visitor into customs and visitors. Floating footer and header is one of its feature and use to display an email optin form and to promote single link or offer. OptinMonster is a premium service. Once you purchase it, you can use OptinMonster WordPress API plugin on your website. It is serve as a connector between WordPress site and OptinMonster. After activation, it will add a OptinMonster menu in your WordPress Admin bar. By clicking on it, you will go to the setting page.


In this page, you will be asked to provide your OptinMonster API key and username. You can get this key from your OptinMonster account. Copy and paste these keys into setting and click on the ‘connect to OptinMonster’ button. This plugin add your WordPress site to your optinMonster account. Now, you click on create new Optin button. Now, you are on the create new optin page on OptinMonster site. In this you have to provide a title for your optin campaign and choose a site where you will using optin. If your site is not listed then click on the new site. After this you can click on the floating bar in select your optin type to use template to use as floating bar. It is launch a customizer when you select a template. It is a point and click builder Where you can configure appearance and Setting to your optin.


When you have configure appearance to your optin then click on the save button. When you create a floating bar first time, it is paused by default. Once you have configured go to the status bar and select start campaign. Now return to the admin area of your WordPress website and go to the OptinMonster > Optins. Here you will see your listed. Click the edit output setting link to continue. On the next page, check the box which is next to the Enable optin on site and save the setting. Now, your floating footer bar opitn is live on your WordPress site.


Conclusion In this post we have discussed about simple way add sticky floating footer bar in WordPress. We hope this article will help you to create sticky floating footer bar. For more info, go to the link below How to Create Sticky Floating Footer Bar in WordPress?

How to create “sticky” floating footer bar in wordpress  

Do you want to create sticky floating footer bar in WordPress? In this post, we will explain you to create sticky floating footer bar. It he...

How to create “sticky” floating footer bar in wordpress  

Do you want to create sticky floating footer bar in WordPress? In this post, we will explain you to create sticky floating footer bar. It he...

Advertisement