How to Create an Alert Bar in WordPress: 2 Effective Methods for 2026

Are you having trouble getting your visitors’ attention for important announcements, exciting offers, or time-sensitive updates? You’re not alone!

Many WordPress site owners struggle with this very challenge – visitors access a page, then scroll and scroll until they’ve completely missed the important information that could influence conversions or improve visitor experience.

This is where an alert bar comes into play. A simple, yet highly effective method that allows for the positioning of an alert bar at the top or bottom of your website. An alert bar highlights important messages without annoying users. Examples include sales countdowns, COVID-19 notices, newsletter promotions, and even cookie consent notifications!

The best part is… You don’t have to be a developer to create one! In this comprehensive guide, we will show you how to create an alert bar in WordPress using two simple methods.

Different processes are described, with the procedure that every method you prefer – plugin or code-based customization. You can find everything you need in this post.

Let’s get started!

Why Create an Alert Bar in WordPress?

When it comes to engaging user attention quickly and effectively, you can’t beat an alert bar. You can use an alert bar to announce a flash sale, redirect traffic to a landing page, or share important updates related to your service. An alert provides a mechanism to communicate a bold message that won’t be missed but is not intrusive.

Users are constantly bombarded with popups, banners, and models in today’s online world, which often leads to banner blindness — or worse, annoyance. That is why an alert bar is so appealing: it sits at the top or bottom, and blends in with your layout, while also contrasting enough to be noticed.

So, why should you create an alert bar in WordPress?

Because it provides you with an effective communication channel, it works across all devices, doesn’t direct a vexatious user experience, and will help you garner more clicks, conversions, or signups.

Alert bars can be tailored to fit your needs, whether for an eCommerce store, a blog, or a membership website.

Common Use Cases for WordPress Alert Bars:

• Announce short-lived promotions like seasonal sales or discounts.
• Communicate time-sensitive notices like maintenance updates or policy changes.
• Showcase free shipping requirements or incentives to fill the cart.
• Collect email leads through newsletter subscriptions.
• Drive traffic to new blog posts, products, or important landing pages.

The best part is that you can choose your message, appearance, timing, and the viewability – without disrupting the flow of your website.

How to Create an Alert Bar in WordPress: 2 Methods

Now that you understand the importance of alert bars, let’s get our hands dirty and make one! There are two ways to do this based on your experience:

• Use a plugin – quick, beginner-friendly, and no coding.
• Use custom code – good for developers or those who would like to have complete design freedom.

Let’s start with the easier method that almost everyone can handle.

Method 1: How to Create an Alert Bar in WordPress Using a Plugin

If you’re looking for a quick, no-code solution, a plugin is your best option. You won’t have to worry about messing up theme files, and plugins will often give you customization options for various things, such as appearance, position, behavior, etc.

For this guide, we’ll be using the WPFront Notification Bar, which is one of the best-reviewed, lightweight, and trusted plugins on the WordPress plugin repository.

Bonus: WPFront Notification Bar is 100% free, mobile responsive, and supports scheduling, multiple visibility rules, sticky positioning, and custom buttons.

Step 1: Install and Activate the Plugin

1. Log in to your WordPress dashboard. Navigate to Plugins → Add Plugin.
2. In the search bar, search WPFront Notification Bar.
3. Click Install Now, then click Activate.

Tip: Make sure your WordPress is up-to-date to avoid compatibility issues with the plugin.

Step 2: Enable and Write Your Alert Message

Once the plugin is activated, go to Settings → WPFront Notification Bar in the dashboard menu.

• Check the box that says Enable Notification Bar.
• In the Message Text box, type the content you want to display.
  • Example: Flash Sale: Get 30% off – Today Only! [Shop Now]

You can include basic HTML tags for styling or links:

Flash Sale: Get 30% off – <a href="/shop">Shop Now</a>

Step 3: Customize Appearance and Behavior

This is where you can make the alert bar look and feel the same as your website.

• Position: Pick the Top or Bottom of the screen
• Height: Adjust the height in pixels to determine how tall the bar is
• Background & Text Colors: Use your brand colors or more eye-catching colors
• Font: Adjust size, family, and weight
• Close Button: If you want, you can enable a dismiss (X) button for your users to hide the bar

You can also set the bar to sticky, which means that when users scroll, it stays fixed.

Step 4: Add a Call-to-Action Button (Optional but Powerful)

Want to increase conversions? Add a CTA button to the right of your alert.

• Scroll down to the Button Section
• Check Display Button
• Then enter a button label (i.e, “Shop Now” or “Get Offer”)
• Then paste in the URL you want it to point to.
• Lastly, customize the button colors, alignment, and behavior on its click (open in the same tab or a new tab).

Pro tip: Use UTM parameters to keep track of how many people click on the alert bar through Google Analytics.

Step 5: Set Display Rules and Publish

Control where and when your alert bar appears:

• Display on select pages or post types
• Set start and end dates for timed alerts
• Select user roles (i.e., show to logged-in users or only to guests)
• Select to display on a desktop, mobile, or both devices

Once you have set everything to your liking, you need to click Save Changes and head over to your website to see your new live alert bar!

Method 2: How to Create an Alert Bar in WordPress Using Code

If you would rather add a few lines of code and have more control without needing a plugin, then this is the method for you. Hopefully, it is clear now how to annotate the wp_head hook to provide a custom alert bar when the site loads.

You will inject your custom alert bar directly into the site front when feeds refresh. This approach also keeps the code close together and in one place for manageability during theme updates.

Important: To be safe and future-proof, you should add this code in your child theme’s functions.php file or a site-specific plugin – NOT in the theme files directly.

Step 1: Add Alert Bar Markup with wp_head

Open your child theme’s functions.php file and add this snippet:

function custom_alert_bar_markup() {
    ?>
    <div id="custom-alert-bar">
        <p>Limited Time Offer: 25% Off Sitewide – <a href="/shop">Shop Now</a></p>
        <span class="close-alert-bar" onclick="document.getElementById('custom-alert-bar').style.display='none'">✖</span>
    </div>
    <?php
}
add_action('wp_head', 'custom_alert_bar_markup');

This function injects the alert bar right before the closing </head> tag using the wp_head action, which is a safe and widely used method in theme development.

Step 2: Add Styling via wp_head or Custom CSS File

Now, let’s style the bar. You can place the CSS inside the same functions.php file using wp_head, or better — add it in your Additional CSS area under Appearance → Customize:

#custom-alert-bar {
    background-color: #e60023;
    color: #ffffff;
    padding: 15px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#custom-alert-bar a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: normal;
}

.close-alert-bar {
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
    font-size: 18px;
}

This makes your alert bar fixed at the top, responsive, and visually distinct without looking spammy.

Step 3: Add Padding to the Body to Prevent Overlap

Since the bar is positioned fixed, it may cover your site’s top content. Add this snippet to your CSS:

body {
    padding-top: 60px;
}

You can adjust the 60px value to match the actual height of your bar.

Final Thoughts: Ready to Create Your Own Alert Bar?

At this point, you should have everything you need to add an alert bar in WordPress (no matter your technical skills).

Whether you choose the plugin route for speed and a simplified installation or you choose to code one yourself in order to have the most control, both methods will allow you to provide important messages to your visitors in a bold but subtle way.

Alert bars are an extra secret weapon for grabbing attention, increasing engagement, and even driving conversions without interrupting your visitors’ experience.

Let’s face it – there are a lot of things going on in the digital world. But with a well-placed alert bar, you can make sure your voice is still heard.

Here is a summary of everything we touched on:

• Why alert bars are valuable to modern websites
• Two methods of creating alert bars – plugin-based or code-based
• Best practices around styling, positioning, and impact

So, where do you go from here? Add your alert bar – perhaps it’s for a flash sale, a new blog post, or maybe for building an email list for your newsletter. Now that you have the tools you need, it is up to you to take your project to completion!

Pro Tip: Be sure to test every alert bar design on desktop and mobile, and keep the message short and actionable!

FAQs: How to Create an Alert Bar in WordPress

We’ve covered the methods, best practices, and pro tips, but you may still have a few burning questions. No worries! Here are the most common ones people ask when trying to create an alert bar in WordPress: