Get Pro

Add a Top Notification Bar to WordPress (No Page Builder Needed)

by

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="ovkit-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;">
            &times;</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

OvKit includes an Announcement Bar under Features → Frontend. Set your message, colors, link, and toggle visibility — all from the admin panel. Includes a dismiss button with cookie-based persistence so returning visitors don’t see it repeatedly.

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 .

### 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. OvKit’s implementation uses a cookie so dismissed bars stay hidden for a configurable period.

Related reads: