Description
Definitive Announcement Bar adds a clean bar to the top of your site for shipping notices, sales, opening hours or any other short message. Add several messages and they cross-fade automatically.
It is built to stay out of your way: one small stylesheet, one small script without jQuery, and nothing is loaded on pages where the bar is hidden.
Works with your setup
- Bricks Builder – the bar is placed right before your Bricks header. It is never shown inside the builder. Colors, font size and padding accept Bricks CSS variables such as
var(--primary). - Any other theme – block themes and classic themes use the standard
wp_body_openhook. For older themes without that hook, the bar is moved to the top of the page automatically. - WooCommerce – show or hide the bar on the shop, product categories, single products, cart, checkout and My Account. Shortcodes inside messages work, too. Compatible with High-Performance Order Storage and the block-based cart and checkout.
- Page builders and custom headers – switch to manual placement and use the
[definitive_announcement_bar]shortcode wherever you want the bar.
Features
- Multiple rotating messages, edited in a compact visual editor with bold, italic and links
- Live preview on the settings page that updates while you edit
- Optional call-to-action button with its own colors
- Background, text, link and close button colors, font family, font size, height, padding, alignment and uppercase style
- Pick a font installed on your site (theme, Font Library or Bricks custom fonts) or type any CSS font-family
- Top of the page, optionally sticky while scrolling, or fixed to the bottom of the screen
- Optional close button (×): a closed bar stays hidden for the session or a number of days, and reappears automatically when you change the messages
- Show the bar everywhere except selected pages, or only on selected pages: front page, blog, posts, pages, search, 404 or WooCommerce pages
- Always show or never show the bar on any single post, page or product from its edit screen
- Show the bar on desktop and mobile, desktop only or mobile only
- Show the bar to everyone, only logged-in users or only logged-out visitors
- Schedule a start and end date, for example for a weekend sale
- Works with page caching: dismissal and scheduling are also checked in the browser
- Accessible: keyboard-friendly close button, rotation pauses on hover and focus, and animations are turned off for visitors who prefer reduced motion
- Translation ready and RTL friendly. Messages and the button can be translated with WPML or Polylang
Screenshots



Installation
- In your WordPress admin, go to Plugins Add New and search for “Definitive Announcement Bar”.
- Install and activate the plugin.
- Go to Settings Announcement Bar, add your messages and save.
FAQ
-
Does it work with Bricks Builder?
-
Yes. When Bricks is your active theme, the bar is printed right before the Bricks header template. If you would rather place it inside your header, choose “Manual” placement and add the
[definitive_announcement_bar]shortcode with a Bricks Shortcode element. -
Does it work with WooCommerce?
-
Yes. WooCommerce pages get their own display rules, so you can, for example, hide the bar on the checkout. You can also hide it on individual products.
-
My sticky header covers the bar. What can I do?
-
When the bar is visible, its height is available as the CSS variable
--dabar-heighton thehtmlelement. Addtop: var(--dabar-height, 0px);to your sticky header. The variable is set to0pxonce a visitor closes the bar. -
The sticky option does not work.
-
Sticky positioning is blocked when a parent element uses
overflow: hidden. Check your theme or custom CSS foroverflowonhtml,bodyor wrapper elements. -
When does a closed bar show again?
-
With “Keep closed for” set to 0, the bar comes back in the next browser session. Otherwise it stays closed for the number of days you choose. Changing the messages always shows the bar again to everyone.
-
Can I control where the bar appears with code?
-
Use the
dabar_should_displayfilter:add_filter( 'dabar_should_display', function ( $display ) { return is_page( 'contact' ) ? false : $display; } ); -
Can I style the bar with my own CSS?
-
Yes. The bar uses the ID
#dabarand the classes.dabar__inner,.dabar__content,.dabar__message,.dabar__buttonand.dabar__close. The colors and sizes are CSS custom properties (--dabar-bg,--dabar-color,--dabar-close-color,--dabar-link-color,--dabar-button-bg,--dabar-button-color,--dabar-font-family,--dabar-font-size,--dabar-min-height,--dabar-padding), so you can override them in your stylesheet.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Definitive Announcement Bar – Simple, Lightweight Top Bar for Bricks and Online Stores” is open source software. The following people have contributed to this plugin.
ContributorsInterested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.