dark-attentiondark-datedark-timedark-contactdark-infodark-play dark-pricedark-venueicon-alert icon-arrow-left icon-arrow-right icon-blockquote icon-cal icon-clock icon-contact UI / Full-Part-Volunteer CopyCreated with Sketch. EPS IconCreated with Sketch. icon-facebook--dark_circle icon-facebook--dark_square icon-facebook--outline_circle icon-facebook--outline_square icon-facebookCreated with Sketch. icon-htm icon-info icon-instagram--dark_circle icon-instagram--dark_square icon-instagram--outline_circle icon-instagram--outline_square icon-instagram icon-linkedin--dark_circle icon-linkedin--dark_squareicon-linkedin--outline_circleicon-linkedin--outline_squareicon-linkedin icon-logo2 icon-mp3 icon-pinterest--dark_circle icon-pinterest--dark_square icon-pinterest--outline_circle icon-pinterest--outline_square icon-pinterestCreated with Sketch. icon-play icon-price icon-spotify--dark_circle icon-spotify--dark_square icon-spotify--outline_circle icon-spotify--outline_square icon-spotify icon-spreadsheet icon-threads--dark_circle icon-threads--dark_square icon-threads--outline_circle icon-threads--outline_square icon-threads icon-tiktok--dark_circle icon-tiktok--dark_square icon-tiktok--outline_circle icon-tiktok--outline_square icon-tiktok icon-twitter--dark_circle icon-twitter--dark_square icon-twitter--outline_circle icon-twitter--outline_square icon-twitterCreated with Sketch. icon-x--dark_circle icon-x--dark_square icon-x--outline_circle icon-x--outline_square icon-x icon-youtube--dark_circle icon-youtube--dark_square icon-youtube--outline_circle icon-youtube--outline_square icon-youtubeCreated with Sketch. FolderCreated with Sketch. icon-zoom light-attentionlight-cal light-clocklight-contactlight-infolight-play light-pricelight-venue

Alert Bar

An alert bar is a notification that will appear at the top of the browser window when a user visits your website. These are handy for any type of notice you would like all site visitors to see, such as an update to an upcoming event or a change in hours or possibly a pandemic that has cancelled everything.

These bars will appear above the site header and remain there until the user has closed it.

A pink alert bar

Adding an alert bar

To add a new alert bar, go to ‘Options’ in the WP Admin menu and click the ‘Alerts’ tab. Click ‘Add Alert’.

First are the Start Date and End Date fields. These fields determine when an alert will be visible to the users. If the current date is outside of that range, the alert bar will not appear on the site until the specified start date.

Alert Header and Alert Content are the main content fields.

You can update the Alert Background Color by updating this field to any desired color. If this field is left alone, by default the color will the Primary Color chosen in the Customizer. Note: Be sure to choose a background color that is high contrast with the text color so that users can easily read your notification.

The Alert Icon field allows you to decide whether you’d like to show the exclamation icon or not.

Finally, the Alert Link Text and Alert Link fields add a link in the alert. This is particularly helpful if there is a page with more information.

We recommend only having one alert bar showing at a time. While two will appear stacked, the functionality will not work properly.