How to Create GeneratePress Notification Bar without a Plugin

Do you want to create GeneratePress notification bar without a plugin? If you are looking for a simple tutorial, keep reading this post.

Creating a notification bar in the GeneratePress WordPress theme is one of the easiest ways to highlight important updates, promotions, or calls to action without disrupting the user experience.

Instead of relying on a WordPress plugin repository option, you can build a lightweight top notification bar using the Elements Module, custom HTML, CSS code, and JavaScript code.

A dismissable notification bar with a close button not only improves website design but also boosts engagement, making it a smart choice for affiliate marketing, announcements, or seasonal campaigns.

First, let’s see why you need to create a notification bar on your website.

Why Do You Need to Create GeneratePress Notification Bar

A notification bar in the GeneratePress WordPress theme can play a vital role in improving user experience and driving engagement.

It allows site owners to highlight important announcements, seasonal offers, or affiliate marketing campaigns right at the top of the page.

A top notification bar ensures that visitors do not miss urgent updates, such as sign in reminders, product launches, or discount codes.

Unlike pop-ups that can disrupt browsing, a dismissable notification bar provides a non-intrusive way to communicate.

It can also be styled with custom HTML, CSS code, and JavaScript code for branding consistency.

For bloggers, businesses, and digital marketers, this simple feature enhances conversions while keeping loading speed optimized.

How to Create GeneratePress Notification Bar without a Plugin

For this tutorial, we will be using the premium version of GeneratePress, also known as GP Premium. The very first thing you are going to do is enable the Elements Module.

Now you can see the Elements settings on the top bar.

There, you need to create a new Element. From the dropdown, choose the type as hook.

Name your hook and use this HTML code:

<div id="quadlayers-top-bar-notification">
	<div class="notice-inner grid-container">INSERT YOUR NOTIFICATION HERE!  <a href="ENTER YOUR URL HERE" target="_blank">INSERT YOUR LINK Text HERE</a><button id="quadlayers-closebar" type="button">X</button>
	</div>
</div>

You can scroll down to the hook settings and choose the generate_before_header location.

Next, choose the location. We recommend using the entire site as the location.

Publish the element after customizing it. Now, you need to add a little bit of JavaScript code to another hook. The JS code will help the visitors close the notification bar.

So, as we created before, make a new hook element and paste this code:

<script>
    document.getElementById("quadlayers-closebar").onclick = function() {
        var z = document.getElementById("quadlayers-top-bar-notification");
        if (z.style.display == 'none') {
            z.style.display = 'block';
        } else {
            z.style.display = 'none';
        }
    }
</script>

For the hook location, choose wp-footer. And for the display location, choose the entire site. Once you have completed these steps, publish the hook.

If you check the front end of the website now, you will see the raw form of the notification bar.

To fix it, you need to use some CSS code. The CSS code we recommend is:

#quadlayers-top-bar-notification {
	text-align: center;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 9999;
	border-bottom: 3px dashed #eaf1f8;
	background-image: linear-gradient(to left, #E100FF, #7F00FF)!important;
	color: #fff;
	font-size: 15px;
	padding: 7px 0px;
}

.admin-bar #quadlayers-top-bar-notification {
	top: 32px;
}

#quadlayers-top-bar-notification a {
	border-bottom: 2px dotted;
	color: #fff;
}

#quadlayers-closebar {
	float: right;
	padding: 5px 9px;
	border-radius: 15px;
	background-color: #eee;
	color: #34495e;
	line-height: 1em;
}

After pasting the code, your notification bar will look like this:

You can always change the text or CSS styling based on your requirements.

That’s it.

As you can see in this tutorial, with a little bit of HTML code and CSS, you can create a stunning notification bar in GeneratePress.

Best Practices to Follow While Creating a Notification Bar

When building a Notification Bar in the GeneratePress WordPress theme or GeneratePress premium theme, following best practices ensures excellent performance and user experience:

• Keep the dismissable notification bar lightweight by using pure JavaScript, custom HTML, and optimized CSS code for better loading speed.
• Always add a close button powered by JavaScript cookie so returning visitors don’t see the same message repeatedly.
• Use CSS 3, border property, and smooth CSS transition effects to design a visually appealing top notification bar.
• Apply display rules in the Elements Module to target specific pages, like primary menu, author box, or admin bar.
• Insert scripts via hook Element with the generate_before_header hook instead of directly in functions.php file for flexibility.
• Test with custom CSS in the CSS customiser to make sure your custom HTML widget or top bar widget area looks professional on all devices.

Bonus: Best WordPress Notification Bar Plugins

• Easy Notification Bar
• WPFront Notification Bar
• Hello Bar
• WP Notification Bars
• Top Bar
• Apex Notification Bar
• Foobar

Frequently Asked Questions

Now, let’s take a look at some of the frequently asked questions and answers regarding this topic.

Conclusion

Creating a notification bar in the GeneratePress WordPress theme without a plugin is one of the simplest ways to boost engagement and improve user experience.

By using the elements module, hook element, and generate_before_header hook, you can add custom HTML, CSS code, and pure JavaScript to design a top notification bar with a close button or even a dismissable notification bar using a JavaScript cookie.

The GeneratePress premium theme makes it easy to apply display rules so your message appears only where you want, such as above the primary menu or within the top bar widget area.

With CSS 3 styling, border property adjustments, and lightweight code, you can build websites that load quickly while keeping visitors informed and engaged.

How else would you customize your GeneratePress-powered website?

Let us know in the comments.