25% off ProSNIPC25OFF

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' ) . '">&times;</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