Skip to main content

Announcement Bar

The Promptless companion theme ships an Announcement Bar — a promotional strip that renders at the very top of every page, above the existing utility Top Bar and the main Header. Useful for event countdowns, registration windows, sale dates, call-for-speakers deadlines, or any page-wide notice that warrants prominence above the navigation. This guide shows you how to configure it and the patterns it's designed for.

What the Announcement Bar Is​

A single, page-wide row across the top of the theme that pairs a short message with an optional call-to-action button and an optional dismiss control. Configured site-wide in Appearance → Customize → Announcement Bar, so the same bar renders on every page of the site when enabled. Only available when you're using the Promptless companion theme — the bar is part of the theme, not the plugin, so other themes won't render it even when the plugin is active.

The bar inherits your active palette automatically through the same --aisb-* design tokens the editor and section forms use, so it matches your brand without any per-bar color picking required. Light and dark theme variants are provided so the bar can stay readable against any background palette.

When the Announcement Bar Is the Right Tool​

Perfect for:

  • Event countdowns: "WordCamp Phoenix — Get Tickets" with a date-bounded schedule
  • Registration windows: "Spring 2026 registration is open through March 15"
  • Sale notices: "Black Friday — 30% off through Nov 30"
  • Limited-time CTAs: "Free consultation through end of month"
  • Site-wide alerts: "Office closed Dec 24 — Jan 2"
  • Beta / preview programs: "Try the new dashboard — invite-only"

Not the right tool for:

  • Page-specific notices — the bar is site-wide, so a notice that only belongs on one page is better handled as a section on that page
  • Persistent navigation aids — that's what the Top Bar is for; the announcement bar is meant to come and go
  • Multi-line essays — keep the message to one sentence; the bar's height grows on mobile but it's not designed for paragraph content

Configuring the Bar​

The bar's full configuration lives in Appearance → Customize → Announcement Bar. Open the WordPress Customizer, find the Announcement Bar panel in the left sidebar, and you'll see the following controls.

Enabled Toggle​

The master on/off switch. When off, the bar doesn't render on any page even if every other field is populated. Default is off — the theme ships with no bar so existing sites aren't surprised by a new top row after a theme update.

Message (HTML)​

The text the bar displays. Supports basic inline HTML — <strong>, <em>, <a> — for emphasis and inline links. The character limit is 500, which is far more than the bar's design is meant for; aim for one short sentence that scans at a glance.

The Message field also resolves Reusable Element shortcodes. So if you have a [re:black_friday_dates] snippet, you can write Black Friday — [re:black_friday_dates] — 30% off and the bar picks up the snippet's value at render time. Useful when the dates change year to year and you want a stable bar config.

CTA Text + URL​

Optional pair. Both fields together render a button to the right of the message. Either one alone (text without URL, or URL without text) renders nothing — the pair must be complete for the button to appear.

Keep the CTA text short — "Get Tickets", "Register Now", "Shop Sale" — the button is small and long text gets cramped. The URL accepts internal paths (/tickets), full URLs (https://example.com), tel: links, and mailto: links.

Dismissible Toggle​

When enabled, an X appears at the right end of the bar. Visitors who click it dismiss the bar for the duration of the cookie's life.

Dismissal is content-hashed — the cookie key is derived from a hash of the message text. Edit the message text and visitors see the new bar automatically because the new hash doesn't match any cookie they've already set. This is the durable behavior you want: change the announcement and your dismissed-it audience sees it again, without you having to manually "reset dismissals" or clear cookies.

If the bar is critical (legal disclosure, site-wide alert), leave Dismissible off so visitors can't make it disappear.

Theme Variant​

Light or Dark. Light uses your palette's light background and text colors; Dark uses your palette's dark background and dark-text colors. The plugin's color palette settings flow through automatically — change the palette and the bar follows.

Pick the variant that contrasts with your site's overall design. Most sites with a light body background want the bar in Dark for emphasis (a dark stripe above a light page draws the eye); sites with a dark theme want the bar in Light for the inverse reason.

Start Date + End Date​

Optional pair of datetime fields with the browser's native date/time picker. When set, the bar only renders during the window between Start and End.

  • Both empty: the bar shows whenever Enabled is on.
  • Start only: the bar shows from Start onward, indefinitely.
  • End only: the bar shows from now until End.
  • Both set: the bar shows only between Start and End.

The window check runs server-side against your WordPress site timezone — the timezone you configured in Settings → General. There's no "the bar appears for a second and then disappears" flash because the server decides whether to emit the bar's HTML at all, and there's no client-clock-skew bug because nothing on the visitor's machine is consulted for the schedule.

Datetime values use the HTML5 datetime-local format (YYYY-MM-DDTHH:MM or with seconds). The seconds component is optional and most use cases won't need it.

Workflow Patterns​

Black Friday banner (1-week window)​

  1. Open Customize → Announcement Bar
  2. Enabled: On
  3. Message: <strong>Black Friday — 30% off everything.</strong> Use code FRIDAY30 at checkout.
  4. CTA Text: Shop Sale
  5. CTA URL: /sale (or the full URL of your sale landing page)
  6. Dismissible: On (visitors who already bought can dismiss it)
  7. Theme: Dark (high-contrast for the sale's urgency)
  8. Start Date: November 27 12:00 AM
  9. End Date: December 1 11:59 PM
  10. Publish

The bar appears from Nov 27 through Dec 1 inclusive, then disappears automatically. No manual cleanup. If a visitor dismisses it on Day 1, they don't see it for the rest of the run. Edit the message text (e.g., extend with "FINAL DAY — Dec 1 only") and the content-hash dismissal regenerates so they see the updated version.

Multi-month event countdown​

For a multi-month event countdown ("WordCamp Phoenix — 60 days to go!" then "30 days to go!" then "Last week!"), edit the message text in place periodically and let the content-hash dismissal feature re-show the bar to anyone who'd dismissed an earlier version. No need for separate bars or scheduled tasks.

For a notice that must stay visible to every visitor (a "we use AI to generate some content" disclosure, for example):

  • Enabled: On
  • Dismissible: Off (visitors can't make it disappear)
  • Start / End dates: leave blank (always show)
  • Theme: pick whichever variant fits

The bar becomes a permanent fixture, but you can update its text anytime via the Customizer.

Maintenance / urgent alert​

For an urgent operational alert:

  • Enabled: On briefly
  • Message: short and direct — "Site maintenance Saturday 10pm–midnight PT"
  • CTA: omit (no action to take)
  • Dismissible: Off (don't let people dismiss what they need to read)
  • Schedule the End Date for the end of the maintenance window so the bar disappears automatically afterward

Promptless Connector Integration​

When the Promptless plugin is active, the announcement bar can be configured via the connector's MCP tools — useful for AI workflows that want to set up a banner as part of a larger deploy.

wordpress_announcement_bar_get returns the current configuration as a structured object (every field above) so the AI can read state before making changes.

wordpress_announcement_bar_set accepts a partial configuration object — any field you don't pass is left unchanged. Lets the AI update just the message + schedule without touching the dismissible / theme settings the user already configured.

The connector validates inputs server-side (message length cap, valid theme variant, schedule end > start, URL passes WordPress's esc_url_raw to reject javascript: / data: schemes). Invalid inputs return a structured 422 error so the AI can correct and retry.

Typical AI workflow: "Set up a Black Friday banner from Nov 24 to Nov 30 with a link to the sale page" → the AI calls wordpress_announcement_bar_set with the message + CTA + start/end dates → bar appears on the schedule, dismissal cookies invalidate when message text changes, and the bar disappears automatically after Nov 30.

Performance Notes​

  • Conditionally enqueued. The bar's CSS and dismiss JS are only loaded on pages where the bar actually renders. Pages that fall outside the schedule, or load when the bar is disabled, pay zero overhead for the feature.
  • Server-side rendering. The bar's HTML is rendered by PHP. No JS framework loads, no late client-side decision about whether to show the bar. The dismiss button's JS is a small vanilla handler that runs only when the bar exists.
  • CSS-only animations. The dismiss transition is a CSS height + opacity animation. The bar respects prefers-reduced-motion so visitors with motion-sensitivity preferences see the bar disappear instantly rather than animating.
  • Mobile-first responsive. The message + CTA stack vertically on phones; the dismiss button stays in the corner. The bar's height grows to accommodate but doesn't push the rest of the page content unpredictably.

Where to Find the Announcement Bar Settings​

In WordPress Admin, navigate to Appearance → Customize → Announcement Bar. All controls described above appear in that panel. Customizer changes are live-previewed in the right pane; the bar appears or disappears as you toggle Enabled or adjust the schedule.

For AI-managed sites, see the Promptless Connector documentation for wordpress_announcement_bar_get and wordpress_announcement_bar_set MCP tools.