How To Create Sticky Floating Footer Bar In GeneratePress

create sticky floating footer bar in GeneratePress theme

In this article, we are going to see how to create sticky floating footer bar in GeneratePress theme. I have seen that multiple website owners face problems in creating a sticky floating footer bar in GeneratePress theme and this is one of the most common issues seen on the GeneratePress’s official forum.

There is a simple method of accomplishing this in the GeneratePress premium version. For those who are running the GeneratePress free version, they need to do this via downloading a plugin.

GeneratePress is a multi-purpose WordPress theme that is fast, flexible, and has tons of customization options. Well, the free version does not support granular levels of customization, but does offer a lot more than its competitors. If you want to know all the differences in detail, please go through our article GeneratePress free vs premium. I have given a detailed comparison between both the versions.

If you are interested in understanding why GeneratePress is so popular and want to have a look at its most crucial features, I’d suggest you go through the GeneratePress Review.

Before we head into creating a sticky floating footer in GeneratePress theme, let us first understand why do we need a sticky floating footer bar on a website.

Why To Create Sticky Floating Footer Bar?

A sticky floating footer bar is a fixed footer bar at the bottom end of your browser’s window. As the name says “Sticky”, it will always remain at the end of your browser’s window, no matter how long the user keeps scrolling down on the page. This is to predominantly display the most important information/content of your website, to your visitors.

with and without sticky floating footer bar
Sticky Floating Footer Bar sticks to the bottom of your browser’s window

As it remains visible to your users at all times, there is a higher possibility of them clicking on it to find out better content.

This is the place you can offer deals to your customers, create social sharing buttons, have your visitors to opt-in for email subscriptions, or even promote discount coupons. Remember, to use this only for content that turns out to be more useful to your audience.

What Can You Expect From A Sticky Floating Footer Bar?

A sticky floating bar can…

  • Get you more clicks to pages that weren’t getting enough traffic
  • Increase your email list of subscribers as Opt-Ins in a sticky floating footer bar work very well
  • Showcase discounts and coupons that you’ve always wanted to promote on your site. Bringing in more sales and revenue.

To create sticky floating footer bar in GeneratePress theme we will be using 2 methods.

  • Method 1: By using a Plugin – Recommended for GeneratePress Free users
  • Method 2: By using small amount of Code – Recommended for GeneratePress Premium users

Note: If you are not comfortable with coding I recommend using the plugin, even if you are running GeneratePress premium theme.

I will be demonstrating method 1 using WPFront Notification Bar plugin on BloggingIdol

Create Sticky Floating Footer Bar In GeneratePress Using Plugin

Below is an image of how my website, BloggingIdol looks like, before creating sticky floating footer bar

before create sticky floating footer bar in generatepress theme
BloggingIdol – without sticky floating footer bar in GeneratePress theme

Now we will accomplish method 1, by downloading a plugin called WPFront Notification Bar.

  • Go to your WordPress Dashboard, hover your mouse on Plugins and click on Add New.
add new plugins in WordPress
  • Type in WPFront Notification Bar in the search box, and later click on Install and Activate.
WPFront Notification Bar to create sticky floating footer bar in GeneratePress theme
Search WPFront Notification Bar, then Install & Activate
  • Once you’ve installed and activated the plugin, it will automatically take you to its Settings page.
setting WPFront Notification Bar to create sticky floating footer bar in GeneratePress theme
WPFront Notification Bar Settings Page
  • You will need to check mark Enabled, Preview Mode, and Fixed at Position. Also select Bottom as position.
  • Further below you have an option to write your own Custom Text and create Buttons. Moreover, it also offers color customization options to match the theme of your website.
  • Don’t forget to hit the Save Changes button at the bottom end of the WPFront Notification Bar Settings page.
create sticky floating footer bar in GeneratePress theme using WPFront Notification Bar plugin
Sticky Floating Footer Bar In GeneratePress Theme

That’s it, this is how you create sticky floating footer bar in GeneratePress theme using a plugin.

Also Read: How to Display Last Updated Date in Generatepress Theme

Create Sticky Floating Footer Bar In GeneratePress Theme Using Code

This method needs you to have GeneratePress premium plugin installed on your WordPress website.

Reason being, you will need a module for accomplishing this task, that only gets bundled with GP Premium plugin.

Note: I will remove WPFront Notification Bar Plugin, before demonstrating this method.

Let’s get started then…

Activate Elements Module

  • Go to your WordPress Dashboard, hover your mouse on Appearance and then click on GeneratePress.
wordpress dashboard appearance GeneratePress
  • Here you will need to activate the Elements module.
activate elements module in GeneratePress theme
Elements Module in GP Premium
  • For BloggingIdol, I have already activated the Elements module on my GeneratePress premium theme.

Create A Hook

For creating a Hook, you will need to Add New Element.

  • Go to your WordPress Dashboard, hover your mouse on Appearance, and this time click on Elements.
wordpress dashboard appearance elements
  • This will open the Elements Page. Click on Add New Element.
adding new element in GP premium
Add New Element in GeneratePress Premium Theme
  • Once you click on Add New Element, you will see a window to choose from. Select Element type as Hook and click on Create.
choose element type as hook
Create Hook for Sticky Floating Footer Bar
  • After creating the Hook you will need to add the code.
sticky floating footer bar hook code
<div class="sticky-floating-footer-bar">
    <div class="notice-inner grid-container">
        <span>Let's Make Your Blogging Journey Easy</span>
<a href="https://www.facebook.com/groups/823816958094089">
<button class="bloggingidol-button">Join FB Group</button></a>
    </div>
</div>
  • With the code you will also need to select the Hook – generate_after_footer. This will generate the hook after the GeneratePress footer copyright section.

Note: If you want to remove/modify GeneratePress footer credits read how to remove built with GeneratePress article.

  • Under Display Rules, select Location as Entire Site. Click on Save.
  • Now you will need to use those CSS classes under Additional CSS in GeneratePress Theme Customizer.
  • Go to your WordPress Dashboard, hover your mouse on Appearance, and this click on Customize.
  • Go to Additional CSS option and put the CSS code.
CSS for sticky floating footer bar in generatepress theme
CSS for Sticky Floating Footer Bar in GeneratePress Theme
.sticky-floating-footer-bar {
    position: fixed;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    z-index: 9999;
    background-color: #0f0f0f; /* Change the Color according to your choice */
    color: #ffffff;
    width: 100%;
}

.sticky-floating-footer-bar span {
    padding-right: 10px;
    font-size: 18px;
}

.bloggingidol-button {
	  background-color: #4267B2;
    border-radius: 50px;
    padding: 5px 10px;
	font-size: 18px;
  font-weight: bold;
	margin-left: 12px;
}

body {
    margin-bottom: 50px;    /*  Change to Match with body*/
}
sticky floating footer bar desktop and mobile view of BloggingIdol
Sticky Floating Footer Bar – Desktop & Mobile view

This is how the sticky floating footer bar look like on desktop and mobile view.

Conclusion

That’s it, wasn’t it simple.

Basically, using the code is for users who have GeneratePress premium version.

Copy the code and change the color according to your theme style. If you still have any doubts regarding this guide, feel free to leave a comment.

More in Generatepress:

Ankur Purecha

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol

Leave a Comment