Sticky Announcement Bar
Renders a dismissible sticky announcement bar at the top of every page, configurable via a filter.
Module3 parts · by SnipCraft
PHPOutput
php
<?php
if ( ! function_exists( 'scseed_announcement_bar' ) ) {
function scseed_announcement_bar() {
$message = apply_filters( 'scseed_announcement_message', '' );
if ( empty( $message ) ) {
return;
}
echo '<div id="scseed-announce-bar" role="region" aria-label="' .
esc_attr__( 'Announcement', 'scseed' ) . '">' .
'<span>' . wp_kses_post( $message ) . '</span>' .
'<button id="scseed-announce-close" aria-label="' .
esc_attr__( 'Dismiss announcement', 'scseed' ) . '">×</button>' .
'</div>';
}
add_action( 'wp_body_open', 'scseed_announcement_bar' );
}CSSStyles
css
#scseed-announce-bar {
position: sticky;
top: 0;
z-index: 9990;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: #0073aa;
color: #fff;
padding: 0.6rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
}
#scseed-announce-bar a {
color: #fff;
text-decoration: underline;
}
#scseed-announce-close {
background: none;
border: none;
color: #fff;
font-size: 1.2rem;
cursor: pointer;
line-height: 1;
padding: 0 0 0 0.5rem;
opacity: 0.8;
}
#scseed-announce-close:hover {
opacity: 1;
}JavaScriptScript
js
(function () {
'use strict';
var bar = document.getElementById('scseed-announce-bar');
var closeBtn = document.getElementById('scseed-announce-close');
if (!bar || !closeBtn) { return; }
var KEY = 'scseed_announce_dismissed';
if (sessionStorage.getItem(KEY)) {
bar.style.display = 'none';
return;
}
closeBtn.addEventListener('click', function () {
bar.style.display = 'none';
try { sessionStorage.setItem(KEY, '1'); } catch (e) {}
});
})();#frontend#ux#marketing#notification