Announcement bar at the top of the site
A slim bar across the top of every page with your message and a link, for sales, opening hours or news. Visitors can close it, and it stays closed for them.
Before you switch it on: Write your own message and link in the <p> line, and pick your colours.
It arrives switched off, even when you install its whole pack with "Switch on after installing".
<div class="snipfire-announce" role="region" aria-label="Announcement" hidden>
<p><strong>Free shipping</strong> on orders over €50 this week. <a href="/shop/">Shop now</a></p>
<button type="button" aria-label="Close">×</button>
</div>
<style>
.snipfire-announce { position: relative; background: #0f1e3d; color: #fff; text-align: center; padding: 10px 44px; font-size: 15px; }
.snipfire-announce p { margin: 0; }
.snipfire-announce a { color: inherit; text-decoration: underline; }
.snipfire-announce button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border: 0; background: none; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
</style>
<script>
( function () {
var bar = document.querySelector( '.snipfire-announce' );
var key = 'snipfire-announce-' + bar.textContent.trim().length; // A new message shows again.
try {
if ( window.localStorage.getItem( key ) ) {
return;
}
} catch ( e ) {}
bar.hidden = false;
bar.querySelector( 'button' ).addEventListener( 'click', function () {
bar.hidden = true;
try { window.localStorage.setItem( key, '1' ); } catch ( e ) {}
} );
} )();
</script>
Good to know
Needs a theme that supports wp_body_open (almost all do, block themes included).
In these packs
- Design touches: Small front-end touches: a reading progress bar, an announcement bar, a WhatsApp button, accessibility fixes.