How to Create an Alert Bar in WordPress: 4 Tested Methods

You can create an alert bar in WordPress with the WooCommerce store notice, a free banner plugin, a header block or custom code. Each method puts one message on every page of your site. This guide shows all four with the exact settings we used.

We tested every method in October 2026 on test sites running WordPress 7.1.3. The store notice ran on WooCommerce 11.2.1 and the plugin was Simple Banner 3.3.2. We also ran the code on a classic theme and on a block theme.

You will learn which method fits your site and how to keep the bar accessible. The code section also explains why printing the bar with the wp_head hook is a mistake.

What Is an Alert Bar in WordPress?

An alert bar is a strip of text that shows the same message on every page of your site. Site owners use it for shipping deadlines, sale end dates and short maintenance windows. It is also called a WordPress notification bar, a top bar or a sitewide message.

Keep the message short and true for every page. A shipping cutoff fits an alert bar. A detail about one product belongs on that product page instead.

An alert bar is different from a pop-up. It sits in the page layout and does not cover the content. Visitors can keep reading while the message stays in view.

If the message needs a discount, set up the discount first. Our guide to creating WooCommerce coupon codes covers that step. Our guide to promoting your WooCommerce store lists other places to repeat the offer.

Which Alert Bar Method Should You Use?

Use the WooCommerce store notice if you run a store and want no extra plugins. Use a banner plugin if you need colors, links and a close button without any code. Use a header block or custom code when you want full control over the design.

Method	Where you set it	Close button	Tested on
WooCommerce store notice	WooCommerce panel in the Customizer	Dismiss link	WooCommerce 11.2.1 on Twenty Twenty-Five
Simple Banner plugin	Simple Banner settings screen	A setting you turn on	Version 3.3.2 on Twenty Twenty-Five
Header block	Header template part in the Site Editor	None	Twenty Twenty-Five
Custom code	A small plugin file	A button you write	Twenty Twenty-One and Twenty Twenty-Five

Pick by your situation:

• Store that already runs WooCommerce: Use Method 1.
• Any site that needs colors, links and a close button: Use Method 2.
• Block theme and a message that rarely changes: Use Method 3.
• Custom markup or your own dismiss rules: Use Method 4.

The first two methods suit most sites because you edit them from a settings screen. The header block only works on a block theme. The code route takes the most care, but it is the only one where you control every detail of the markup.

Method 1: Use the WooCommerce Store Notice

The WooCommerce store notice is a built-in setting that shows a short message on every page. You type the message in the Customizer and tick the Enable store notice box. Visitors get a Dismiss link, and WooCommerce remembers that click in a browser cookie.

Follow these steps:

1. Open the Customizer: Go to Appearance > Customize > WooCommerce > Store Notice.
2. Write the message: Type your text in the Store notice box and tick Enable store notice.
   
3. Publish the change: Click Publish at the top of the Customizer.
4. Check the front end: Open your shop in a private window. The notice appears with a Dismiss link.
   

On a block theme the Appearance menu has no Customize link.

The WooCommerce store notice documentation says the Customizer is hidden on block themes. On our Twenty Twenty-Five site the Customizer still opened when we typed /wp-admin/customize.php after the site address. Our guide to editing the WooCommerce shop page explains more about classic and block themes.

On that theme the notice appeared as a purple bar at the bottom of the first screen. It scrolled away with the page when we scrolled down.

The panel has only two fields, the message and the checkbox. You cannot pick colors or pages there. WooCommerce’s default look and the theme’s own styles decide how the notice appears.

When we clicked Dismiss, the notice disappeared on the next page and after a reload. WooCommerce stored the click in a cookie named after the notice. The cookie we saw was a session cookie, which browsers normally clear when they close.

Skip this method if your site does not run WooCommerce. The store notice panel belongs to WooCommerce. A plain WordPress site has no such setting; use Method 2 or Method 3 there.

Method 2: Use a Free WordPress Banner Plugin

A WordPress banner plugin gives you a text box, color fields and a close button without code. We tested Simple Banner 3.3.2, which WordPress.org lists with more than 50,000 active installations. The free version shows one banner at the top or bottom of the site.

Follow these steps:

1. Install the plugin: Go to Plugins > Add Plugin, search for Simple Banner, click Install Now and then Activate.
   
2. Write the banner text: Open the new Simple Banner menu and switch the text editor to the Code tab. Links must be HTML a tags, as the settings page says. Click Show Banner.
   
3. Pick the colors: We used #0b3d91 for the background and white for the text. The link color was #ffd24d and the close button color was white.
4. Turn on the close button: Tick Enable close button and type 14 in the Expiration field. Also tick Use wp_body_open hook, which the settings describe as a fix for layout shift problems.
   
5. Save and check: Click Save Changes and open the front end.
   

The plugin card on the Add Plugins screen says Simple Banner is untested with the latest WordPress version. The listing shows it tested up to 7.1.0, and our site ran 7.1.3. We saw no errors in this test.

After we clicked the close button, the plugin set a cookie named simplebannerclosed that expires after the 14 days we typed. The banner stayed gone after a reload and on another page. The settings screen describes this cookie as strictly necessary.

The Placement and Position settings decide where the banner sits. The Position options are Relative, Static, Absolute, Fixed, Sticky and Footer, and we left it on the default, Relative. You can also insert the banner at the top of the body or the header.

The close button color field starts empty and the button drew in black. On our dark blue background it was hard to see until we set the field to white.

The settings also show a Pro panel. Date controls, page exclusions, advanced placement and multiple banners sit there. The free version cannot hide the bar on chosen pages.

Another option to consider is FooBar for a short announcement or call-to-action bar. The free version supports top, bottom and inline placements, so you can pair a message with a next step without writing the bar markup yourself. PRO adds scheduling, countdown and signup bars, plus WooCommerce visibility rules. This is an alternative to evaluate, not one of the four methods tested in this guide. Check its appearance and behavior on your own theme before using it on the live site.

Method 3: Add an Alert Bar to a Block Theme Header

A block theme lets you build the alert bar as a Group block at the top of the Header template part. The bar then appears on every page that uses that header template part. You need no plugin and no code, and one save updates the whole site.

Follow these steps:

1. Open the Header template part: Go to Appearance > Editor > Patterns and open Header under Template parts.
2. Add the bar: Add a Group block above the header and put one Paragraph block inside it. Type your message and center the text.
3. Style the Group: Set the alignment to full width and add padding at the top and bottom. Pick a dark background and a light text color from the theme palette. We used the Contrast and Base colors of Twenty Twenty-Five.
4. Save: Click Save in the top bar of the editor.
   
5. Check the front end: Open any page of the site.
   

This bar has no close button because it is plain text inside a template part.

To change the message later, open the same template part and edit the paragraph. Visitors cannot dismiss it. Keep the text short and neutral.

Method 4: Create an Alert Bar in WordPress With Code

You can create an alert bar in WordPress with a small plugin file that prints the bar on the wp_body_open hook. The hook runs right after the opening body tag, according to the WordPress developer reference. Our version uses a real button and remembers when a visitor dismisses the bar.

Do not print the bar with the wp_head hook.

The wp_head reference says that hook fires inside the head element. In our test the div sat inside the head in the page source. The browser then moved it into the body, together with the scripts and styles that came after it.

Save this code as simple-alert-bar.php in wp-content/mu-plugins. Create the folder if it does not exist. WordPress loads files from that folder without activation.

<?php
/**
 * Plugin Name: Simple Alert Bar
 * Description: Prints a dismissible alert bar at the top of every page.
 * Version: 1.0.0
 */

defined( 'ABSPATH' ) || exit;

add_action( 'wp_body_open', 'sab_print_alert_bar' );

function sab_print_alert_bar() {
	$id      = 'delivery-2026';
	$message = 'Free delivery on orders over $50 this week.';
	?>
	<div id="alert-bar" class="alert-bar" role="region" aria-label="Site announcement" data-bar-id="<?php echo esc_attr( $id ); ?>">
		<p class="alert-bar__text"><?php echo esc_html( $message ); ?></p>
		<button type="button" class="alert-bar__close" aria-label="Dismiss announcement">&times;</button>
	</div>
	<script>
	( function () {
		var bar = document.getElementById( 'alert-bar' );
		var key = 'alertBarDismissed';
		try {
			if ( localStorage.getItem( key ) === bar.dataset.barId ) {
				bar.remove();
				return;
			}
		} catch ( e ) {}
		bar.querySelector( '.alert-bar__close' ).addEventListener( 'click', function () {
			bar.remove();
			try {
				localStorage.setItem( key, bar.dataset.barId );
			} catch ( e ) {}
		} );
	}() );
	</script>
	<?php
}

add_action( 'wp_enqueue_scripts', 'sab_enqueue_alert_bar_style' );

function sab_enqueue_alert_bar_style() {
	wp_register_style( 'alert-bar', false, array(), '1.0.0' );
	wp_enqueue_style( 'alert-bar' );
	wp_add_inline_style(
		'alert-bar',
		'.alert-bar{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 1rem;background:#0b3d91;color:#fff;font-size:1rem}
		.alert-bar__text{margin:0}
		.alert-bar button.alert-bar__close:not(:hover):not(:active),.alert-bar button.alert-bar__close:hover,.alert-bar button.alert-bar__close:active{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:.25rem .5rem}
		.alert-bar button.alert-bar__close:focus-visible{outline:2px solid #fff;outline-offset:2px}'
	);
}

Here is what each part does:

• Message and ID: The $message variable holds the text. The $id value names this announcement.
• Dismiss memory: The script saves the ID in the browser’s local storage when a visitor clicks the button. Change the ID to show the bar again to everyone.
• Inline script: The script sits right after the bar markup and runs as soon as the browser reads it.
• Escaping: Both values go through esc_attr and esc_html. Odd characters then cannot break the markup.

To run a new promotion, change the message and the ID together. Visitors who dismissed the old bar will then see the new one, because their saved ID no longer matches.

We ran this file on Twenty Twenty-Five, a block theme, and on Twenty Twenty-One, a classic theme. The bar was the first element after the admin bar on both. On the block theme, the bar stayed gone after we dismissed it and reloaded the page.

Our first version of the button CSS used one class selector. On Twenty Twenty-One the close button picked up the theme’s dark button background anyway.

That theme styles buttons with several :not() selectors, which outrank a single class. The longer selector in the code above fixes it.

A classic theme must call wp_body_open() after its opening body tag, as the developer reference explains. If a theme skips that call, the bar will not appear. Our Twenty Twenty-One and Twenty Twenty-Five tests both printed it.

A child theme is the other usual home for code like this. A plugin file keeps the bar when you switch themes.

How to Keep an Alert Bar Accessible

An accessible alert bar has readable color contrast, a real button to close it and short text. The W3C WCAG 2.2 guidance asks for a contrast ratio of at least 4.5 to 1 for normal text. We calculated a ratio of about 10 to 1 for white text on our #0b3d91 background.

• Real button: A button can be reached with the Tab key and pressed with Enter. A clickable span cannot.
• Accessible name: The × symbol alone says little to a screen reader. The button carries an aria-label of Dismiss announcement instead.
• Visible focus: The :focus-visible rule in our code draws an outline around the button for keyboard users.
• No motion: Our bar has no animation. If you add a slide-in effect, wrap it in a prefers-reduced-motion media query.
• Remembered choice: A visitor who closes the bar should not see it on the next page. The plugin does this with a cookie and our code does it with local storage.

Put anything visitors must know on the page itself. A dismissed bar is gone for that visitor.

What to Put in an Alert Bar

A good alert bar carries one short message with one clear next step for the visitor. Shipping deadlines, sale end dates and planned maintenance windows all fit that shape well. Anything that applies to one product belongs on that product page instead of the whole site.

Check the promise before you publish it. If the bar says free delivery, your WooCommerce shipping zones must already offer it.

Write the end date in the text and set a reminder to remove the bar that day. Only the Pro version of Simple Banner lists date controls. A free setup needs a manual switch-off.

Test the bar on a phone before you publish. At 390 pixels wide our 43 character message stayed on one line, and the close button stayed inside the screen. Longer text wraps and makes the bar taller.

Conclusion

To create an alert bar in WordPress, start with the method that matches your site. Store owners can use the WooCommerce store notice with one setting. Anyone else can use a banner plugin and get a close button without code.

Block theme users can add a Group block to the header. Developers can use the wp_body_open hook with a real button. Whichever you pick, keep the message short and test it on a phone.

Frequently Asked Questions (FAQs)