How to Create a Sticky Floating Footer Bar in GeneratePress

A sticky floating footer bar is a great way to grab your visitors’ attention without disrupting their browsing experience. Whether you want to display a promotional offer, an important announcement, or a call-to-action, this simple yet effective design can enhance engagement on your website.

If you’re using GeneratePress, adding a floating footer bar is easy with just a bit of HTML and CSS. Let’s walk through the steps to implement it.

Read More: How to Display the Last Updated Date in the GeneratePress Theme

Step 1: Create the Footer Bar in GeneratePress

GeneratePress offers a powerful Elements module that allows you to insert custom code without modifying theme files. Here’s how you can add a sticky footer bar:

• Go to your WordPress dashboard.
• Navigate to Appearance → Elements.
• Click Add New, then select Hook.
• Enter a Title (e.g., “Sticky Footer Bar”).
• In the Hook dropdown, choose wp_footer.
• Enable Execute PHP if you need dynamic content.
• Add the following HTML code inside the content area:

<div class="sticky-footer-bar">
    <p>🚀 Special Offer! Get 20% Off Today! <a href="#">Claim Now</a></p>
</div>

• Set Display Rules: Choose “Entire Site” or specific pages where you want the bar to appear.
• Click Publish.

Step 2: Style the Footer Bar with CSS

Now that the footer bar is added, let’s style it to make it fixed at the bottom of the screen.

• Go to Appearance → Customize → Additional CSS.
• Add this CSS code:

.sticky-footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ff5722;
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    z-index: 9999;
}

.sticky-footer-bar a {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

• Click Publish and check your website.

Step 3: Customize Further

You can enhance your floating footer bar with additional features such as:

• Close Button: Add a dismiss button so users can hide the footer.
• Delayed Appearance: Use JavaScript to make it appear after a few seconds.
• Different Pages: Customize where the footer bar should appear.

For example, to add a close button, update the HTML:

<div class="sticky-footer-bar">
    <p>🚀 Special Offer! Get 20% Off Today! <a href="#">Claim Now</a></p>
    <button class="close-footer">✖</button>
</div>

And add this CSS:

.close-footer {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
}

And JavaScript to close it:

<script>
document.querySelector(".close-footer").addEventListener("click", function() {
    document.querySelector(".sticky-footer-bar").style.display = "none";
});
</script>

Final Thoughts

A sticky floating footer bar in GeneratePress is a powerful tool to boost conversions, highlight promotions, and improve user engagement. With just a few lines of HTML and CSS, you can create a visually appealing and non-intrusive footer bar that keeps your website looking professional.

Give it a try and let us know how it works for you! 🚀