How to Create a Sticky Floating Footer Bar in WordPress

Floating footer bars are one of the most versatile promotional tools available today.

As an experienced webmaster, I‘ve used them on dozens of sites to drive conversions and engagement.

In this comprehensive guide, you‘ll learn everyting you need to know to create an effective sticky footer bar in WordPress.

Why Use a Floating Footer Bar?

Before we dive into the how-to, let‘s look at why you should consider adding a floating bar:

• Increased Email Signups – Floating bars with opt-in forms can double or even triple conversion rates compared to static widgets. I‘ve used them to generate tens of thousands of new emails.

• Higher Ad Earnings – Promoting high-value pages like deals or product releases often results in a 20-30% boost in ad revenue from the extra traffic.

• More Social Shares – A sticky footer bar can help get your best content in front of readers, leading to more natural shares.

• Boost Brand Awareness – Keeping your brand, offers or CTA visible helps reinforce it in the minds of visitors.

• Cross-Sell Products – Ecommerce sites can upsell complementary or higher-tier products from the bar.

• Visible Calls to Action – CTAs above the fold get 304% more clicks according to Unbounce. Sticky bars keep the CTA viewable.

The advantage of a floating bar is that it stays visible even as visitors scroll through long pages. This gives it a better chance of being noticed and clicked.

Now let‘s look at how to actually implement one with WordPress…

Method #1: Manually Add Floating Bar Code

Hardcoding a custom footer bar gives you maximum control and customization options. Here‘s how to do it with HTML, CSS, and jQuery.

Step 1: Add HTML Structure

First, open your theme‘s footer.php file and add this code before the closing </body> tag:

<div class="fixed-footer-bar">

  <div class="fixed-footer-content">
    <!-- Bar content here --> 
  </div>

</div>

This creates a parent <div> to hold the floating bar, with an inner <div> for the content.

You can put any HTML content you want inside .fixed-footer-content.

Step 2: Position with CSS

Next, we‘ll style the bar using CSS:

.fixed-footer-bar {
  position: fixed; 
  bottom: 0;
  left: 0; 
  width: 100%;
  background: #333;
  color: #fff;
  z-index: 9999;
}

.fixed-footer-content {
  text-align: center;
  padding: 15px 10px; 
}

This fixes the outer <div> to the bottom and makes it stretch full width. We also give it a dark background and bring it to the front with z-index.

The inner content <div> is centered and padded.

Step 3: Make It Sticky

Now for the JavaScript to make the bar actually "stick" on scroll:

Create a floating-bar.js file and add:

jQuery(document).ready(function($) {

  var elm = $(‘.fixed-footer-bar‘);

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 100) {
      elm.addClass(‘sticky‘);
    } else {
      elm.removeClass(‘sticky‘);
    }
  });

});

This checks the scroll position and adds a .sticky class when more than 100px from the top.

In your CSS, include:

.fixed-footer-bar.sticky {
  position: fixed;
  top: auto;
}

This overrides the default positioning when scrolled past 100px.

Finally, enqueue the script in functions.php:

function floating_bar_script() {
  wp_enqueue_script( ‘floating-bar‘, get_template_directory_uri() . ‘/js/floating-bar.js‘, array(‘jquery‘) ); 
}

add_action(‘wp_enqueue_scripts‘, ‘floating_bar_script‘);  

Test it out and your footer bar should now stick when scrolling!

Step 4: Add Content

You can put any HTML content inside .fixed-footer-content. Some ideas:

• Headlines or text
• Links to important pages
• Email opt-in forms
• Social media follow buttons
• Promotional offers or discounts
• Multimedia like images or video

Keep in mind the viewport space is limited, so focus on a singular strong CTA or message.

Method #2: Using a WordPress Plugin

Manually coding a floating bar takes work. For an easier option, use a dedicated plugin like OptinMonster.

Although built for conversions, it has great sticky bar templates you can use:

Step 1: Install and Activate

First, install and activate OptinMonster on your WordPress site.

Sign up for an account if you don‘t already have one.

Step 2: Create a New Campaign

In your OptinMonster dashboard, click "Create Campaign" and select the "Floating Bar" campaign type.

Choose a template that‘s closest to your goal, or start from scratch.

Step 3: Customize the Bar

Use OptinMonster‘s drag-and-drop builder to customize your floating bar:

• Add text, images, buttons and HTML
• Change colors, fonts, borders and padding
• Animate it with entrance effects

Match the design to your brand for continuity:

Step 4: Integrate with WordPress

Get your API keys from OptinMonster and enter them into the WordPress plugin settings to connect the two.

In the plugin, enable your new floating bar campaing under Optins > Output Settings.

The bar will now be live on your site! Easily edit or pause it any time.

Statistics: The Power of Floating Bars

Don‘t just take my word on the effectiveness of floating bars – check out these stats:

• OptinMonster users see an average 1351% increase in conversions compared to sidebars. [source]

• Top bloggers like QuickSprout have grown their lists by over 25,000 subscribers in just a few months with floating opt-ins. [source]

• Floating social media buttons can drive 3-4X more clicks than static widget options. [source]

• Ecommerce sites like GearHungry increased revenue by 4.5% with sticky purchase bars. [source]

The data speaks for itself – floating bars work!

Pro Tips for Maximizing Conversions

Here are some pro tips I‘ve learned for getting the most out of your floating bar:

• Limit to one CTA – Keep it simple and focused. Multiple links dilute the impact.

• Match site style – Consistent branding performs better. But don‘t be afraid to stand out.

• Animate subtly – Gentle slide-ins or fades attract attention without annoying visitors.

• Use contrast – Dark background with light text gives the highest visibility.

• Change designs – A/B test different layouts, offers, and CTAs.

• Use selectively – Don‘t overdo it. Display only on relevant pages.

• Review analytics – Track clicks and conversions to optimize over time.

Follow these best practices and your floating bar performance will skyrocket!

Frequently Asked Questions

Here are answers to some common questions about floating bars:

Q: Where exactly should I place the HTML or shortcode?

A: The best practice is right before the closing </body> tag in footer.php. This ensures maximum compatibility.

Q: How do I display the bar on certain pages only?

A: In OptinMonster, you can target by page type or category. With custom code, use conditional PHP logic like is_page().

Q: Can I have multiple floating bars?

A: Yes, absolutely! Just be careful not to overdo it. We recommend starting with one focused bar.

Q: What‘s the ideal height and padding?

A: Generally between 30-50px tall, with 10-20px of padding works best. Test different sizes.

Q: Will a sticky bar hurt my SEO?

A: It shouldn‘t. Google is good at parsing fixed content. Just focus on high-quality content.

Wrapping Up

As you can see, adding a floating footer or sticky bar in WordPress is easy and extremely effective.

Whether you choose a hands-on code approach or convenient plugin like OptinMonster, the key is testing and optimizing over time.

Collect data, experiment with new CTAs and designs, and track conversions.

Used strategically, floating bars can become one of your top sources of traffic, leads and sales.

Now over to you – which method will you use to create your first sticky bar? Let me know if have any other questions!