FAIR

Federated and Independent Repositories

Urban Insight Promobar

Plugin Banner

Urban Insight Promobar

by Urban Insight

Download
Description

Urban Insight Promobar makes it easy to add an attractive and functional promobar to the top of your website. This dismissable announcement promobar displays HTML content and Dashicons on a customizable background color. Administrative users can schedule, enable, and reset the promobar display with intuitive plugin settings.

The promobar is built to stay out of the way of your site’s performance and accessibility scores. It renders in normal document flow so it causes no layout shift, loads no CSS or JavaScript on pages where it will not appear, and ships a keyboard accessible dismiss control with text colour chosen for contrast against whatever background you pick.

Features

The Urban Insight Promobar plugin comes with everything you need to create and manage your sitewide announcement:

  • Custom HTML content display
  • WordPress Dashicons font icon selector, with an adjustable icon size
  • Background color picker option, with a live WCAG contrast readout
  • Automatic black or white promobar text, whichever reads better on your background
  • Options to schedule promobar display with start/end date and time settings, including open-ended windows
  • Show the promobar only on selected pages, or on every page except those selected
  • User dismissal tracking with js-cookie
  • Browser cookie expiration (set in days)
  • Dismissal reset setting using roll browser cookie value
  • Localhost development option
  • Keyboard accessible dismiss control with a visible focus indicator
  • Causes no cumulative layout shift, and loads nothing on pages where it will not appear

Filters

Developers can adjust the promobar with the following filters:

  • urbipb_should_display — whether the promobar should render on this request, after the enable, empty content, exclusion and schedule checks have run.
  • urbipb_exclude_posts_pages — the list of page IDs the promobar is excluded from.
  • urbipb_text_color — the black or white text colour chosen for the background.
  • urbipb_announce_content_html — the promobar content markup, passed the icon and HTML content.
  • urbipb_announce_close_button — the dismiss control markup.
  • urbipb_announce_noscript_style — the noscript stylesheet used when JavaScript is unavailable.

Installing the plugin is easy—just follow one of the following methods:

Install Urban Insight Promobar plugin from within WordPress

  1. Visit the plugins page from your WordPress dashboard and select ‘Add New.’
  2. Search for “Urban Insight Promobar.”
  3. Activate Urban Insight Promobar from your plugins page.

Install Urban Insight Promobar Manually

  1. Visit the plugins page from your WordPress dashboard and select ‘Add New.’
  2. Select the ‘Upload’ option and select ‘Choose File.’
  3. When the popup appears, select the urban-insight-promobar-x.x.zip file from your desktop. (The ‘x.x’ will change depending on the current version number.)
  4. Follow the on-screen instructions to complete the upload.
  5. Once uploaded, activate the plugin via the prompt. A message will confirm activation.
  6. Access a link to access promobar frontend settings on the confirmation page.
  1. Plugin settings

    Plugin settings

  2. Frontend view

    Frontend view

Does your plugin account for the WP Admin Bar height?

Yes. The promobar renders in normal document flow directly after the opening body tag, so the WordPress admin bar sits above it and page content flows beneath it. Earlier versions measured the promobar and added top padding to the body tag; that is no longer necessary and no longer happens.

Can I show the promobar on only certain pages?

Yes. Under Page Visibility choose “Show only on…” and pick the pages. The default is “Show on all pages except…”, which hides it on the pages you select. With no pages selected the promobar shows everywhere in either mode. This applies to pages only, not posts or archives.

Does the promobar affect my Core Web Vitals?

No. The promobar occupies its space from the first paint rather than being revealed after the page loads, so it contributes nothing to Cumulative Layout Shift. On pages where the promobar will not appear, because the plugin is disabled, the content is empty, the page is excluded, or the scheduled window has not started, no promobar CSS or JavaScript is loaded at all. The Dashicons stylesheet is loaded only when you have actually selected an icon.

Does the plugin work with a full page caching plugin?

Yes. The promobar markup is served to every visitor and dismissal is settled in the browser before the page paints, so a cached copy is the same for everyone and a visitor who has dismissed the promobar never sees it flash.

What happens if a visitor has JavaScript disabled?

The promobar still displays. The dismiss control is hidden for those visitors, because dismissal depends on JavaScript to set the cookie.

Where does the promobar text colour come from?

It is chosen for you. The plugin measures the relative luminance of your background colour and pairs it with black or white, whichever gives the higher contrast ratio. The settings screen shows the resulting ratio and warns you when a background cannot meet WCAG AA. Use the urbipb_text_color filter to override the choice.

[1.7.2] 2026-10-19

  • Add an Icon Size setting, from 25px to 100px, defaulting to the previous 64px

[1.7.1] 2026-10-19

  • Hide the promobar on the front end when its HTML content is empty
  • Note under the content editor, while it is empty, that the promobar will not show
  • Match non-breaking spaces with an explicit \u00A0 escape in the admin empty-content check

[1.7] 2026-09-18

  • Add a Page Visibility mode to show the promobar only on selected pages
  • Replace the page multiselect with a checkbox list so long page titles are readable in full
  • Describe every setting on the options screen, including Fixed Position and Enable Localhost
  • Shorten the content editor and note that long content makes the promobar tall
  • Remove an unused value passed to the frontend script

[1.6] 2026-09-18

  • Eliminate cumulative layout shift caused by the promobar
  • Render the promobar in normal flow instead of measuring and padding the body
  • Use sticky positioning for the fixed option so it reserves its space on first paint
  • Settle dismissal in an inline head script so cached pages neither flash nor shift
  • Serve the promobar markup to every visitor so one dismissal cannot be cached for all
  • Load no promobar CSS or JS at all on pages where the promobar will not appear
  • Load the Dashicons stylesheet only when an announcement icon is selected
  • Draw the dismiss control with an inline SVG instead of a Dashicon

[1.5.3] 2026-09-18

  • Fix the promobar failing to appear on fast-loading pages

[1.5.2] 2026-09-18

  • Pair the promobar background with black or white text, whichever reads better
  • Show a live contrast ratio and WCAG AA warning beside the background colour picker
  • Display the promobar for visitors without JavaScript

[1.5.1] 2026-09-18

  • Raise dismiss control contrast from 1.8:1 to meet the 3:1 minimum for controls
  • Enlarge the dismiss target to meet the 24×24 minimum target size
  • Emit announcement content before the dismiss control so it is read first
  • Return focus to the page when the promobar is dismissed
  • Honour prefers-reduced-motion in the show and dismiss animations
  • Show a focus indicator in browsers without :focus-visible support

[1.5] 2026-09-18

  • Add nonce and capability checks to the cookie reset AJAX request
  • Add sanitize callbacks to all plugin settings
  • Escape plugin output in admin fields and frontend markup
  • Make the dismiss control a keyboard-accessible button with a visible focus style
  • Render the promobar after so the dismiss control is reachable early in the tab order, falling back to the footer on themes without wp_body_open()
  • Hide decorative icons from screen readers and label the promobar region
  • Support open-ended schedules with only a start date or only an end date
  • Version plugin CSS and JS assets so updates are not served from cache
  • Remove unused icon picker script and stylesheet
  • Tested with WordPress 7.1.x and PHP 8.4

[1.4.1] 2026-09-18

  • Fix empty icon placeholder when no Dashicon is selected

[1.4] 2025-10-09

  • Revised field names for consistency
  • Added ‘Clear’ buttons to multiple fields
  • Improved banner/icon alignment
  • Tested with WordPress 6.8.x

[1.3.3] 2023-12-07

  • Fix blank dashicons display bug
  • Tested with WordPress 6.4.x

[1.3.2] 2023-08-10

  • Fix protocol check, $_SERVER[‘PORT’] bug
  • Tested with WordPress 6.2.x

[1.3.1] 2022-12-07

  • Update JS Cookie to v3.0.1
  • Update Dashicons Picker preview, icon grid
  • Tested with WordPress 6.1.x

[1.3] 2022-10-27

  • Restore updated icon picker JS feature
  • Update excluded pages multiselect option
  • Tested with WordPress 6.0.x

[1.2] 2021-12-03

  • Remove deprecated icon picker JS feature
  • Tested with WordPress 5.8.x

[1.1.1] 2021-02-04

  • Fix body class bug

[1.1.0] 2021-02-03

  • Add urbipb_disclaimer_fixed setting for fixed position option
  • Tested with WordPress 5.6.x

[1.0.0] 2020-12-13

  • Initial commit
Back to top