Add a Top Notification Bar to WordPress (No Page Builder Needed)
Need a site-wide announcement bar for sales, maintenance notices, or important updates? Here's how to add one to WordPress without a page builder.
You need to announce a holiday sale. Or maintenance downtime. Or a new product launch. A simple bar at the top of every page — visible, dismissible, and not requiring a page builder with 50 settings.
Most “announcement bar” plugins are overbuilt: they include A/B testing, countdown timers, email capture forms, and 200 KB of JavaScript for what should be a colored div with text.
What is an announcement bar?
A horizontal bar fixed to the top of your website, showing a short message to all visitors. Common uses: sale announcements, shipping delays, COVID notices, maintenance warnings, new product launches.
The quick fix
Add this to your theme’s functions.php:
// Add a simple announcement bar
add_action( 'wp_body_open', function() {
$message = 'Free shipping on all orders over 500 NOK — <a href="/shop/">Shop now</a>';
$bg_color = '#28396f';
$text_color = '#ffffff';
echo '<div id="mysite-bar" style="background:' . $bg_color . ';color:' . $text_color . ';
text-align:center;padding:10px 40px 10px 20px;font-size:14px;position:relative;">
' . $message . '
<button onclick="this.parentElement.style.display=\'none\'"
style="position:absolute;right:10px;top:50%;transform:translateY(-50%);
background:none;border:none;color:' . $text_color . ';font-size:18px;cursor:pointer;">
×</button>
</div>';
});Change the $message, $bg_color, and $text_color variables. The bar includes a dismiss button. No JavaScript library needed.
The one-click solution
Ovanap Admin Toolkit includes an Announcement bar under Admin Toolkit → Features → Frontend. Set your message, an optional link, and the colours, choose whether visitors can close it, and optionally show it on the homepage only — all from the admin panel. When a visitor closes it, it stays closed while they browse in that tab.
What happens after you fix this?
- A clean notification bar appears at the top of every page
- Visitors can dismiss it with one click
- Zero page builder overhead — it’s a lightweight HTML element
- Easy to update — change the message anytime
FAQ
Will this push my header content down?
Yes, the bar sits above your header by default. This is the expected behavior. If you want it to overlay the header instead, use position: fixed; top: 0; z-index: 9999; and add padding to your <body>.
Can I show the bar only on certain pages?
With the code approach, wrap the output in a conditional: if ( is_front_page() ) for homepage only, or if ( is_shop() ) for the WooCommerce shop page.
Does the dismiss button persist across page loads?
The basic code version doesn’t — the bar reappears on the next page. Ovanap Admin Toolkit remembers the close in the browser’s session storage, so the bar stays hidden as the visitor moves between pages in the same tab. There is no cookie and no setting for how long it stays hidden.
Related reads: