Global, site-wide website notices are a pattern as old as websites themselves, and although they are being abused all the time they do have valid use-cases and are extremely useful in situations where we absolutely need to notify our visitors of something important, e.g. a great deal (as we do here at CSSIgniter), any kind of maintenance message or even the EU cookie law notice!
When the need rises for such functionality the first thing on anyone’s mind would probably be to have a look at the WordPress plugin repo for any suitable plugins, and, well, although it’s justified (there are a ton of plugins for this kind of thing) there’s no reason not to implement it ourselves since it’s so easy and fun.
Without any further ado, then, let’s see how we’d go about building a simple, global, dismissible site-wide notice bar.
Our basic architecture
The customizer setting
All we need for our notice currently is a single text field. Ever since version 3.4 WordPress has made it extremely simple to add site settings to our websites with the Theme Customization API; a few lines of code in our theme’s functions.php file will do it:
Save the file and refresh the website and now navigating to
Appearance > Customize from the admin dashboard menu we should see a new Customizer section named “Site Notice”, and in it our site section text field, which should already be functional! Let’s type something and save it.
Displaying the site notice
Time to fetch that text and display it on the front-end of our website. Still in functions.php, we’ll use the
wp_footer action to render all the HTML and text of our notice:
Pretty basic stuff, we’re getting the text using
get_theme_mod and output the HTML only if it’s not empty (i.e. we haven’t written anything) or if we’re not at the WordPress admin dashboard.
Only one line needs a bit of explaining:
Adding some styles
For styling we’ll definitely need to make our notice bar absolute or fixed positioned so that it sticks to the top or bottom and/or follows the viewport as the user is scrolling (obviously this is a matter of preference, I’ll leave it up to you). Other than that, some aesthetic touches for coloring, and finally positioning the dismissing button:
And here’s how it’s going to look:
Handling the display logic
The general concept is based on leveraging the browser’s
localStorage. If it does, we’ll do nothing (keep it hidden), if it doesn’t we’ll show it! Simple enough, let’s see how we’ll go about it.
First, we’ll need to start with the notice bar hidden so let’s add that to our previous styles:
Then the “tricky” part, in our theme’s custom scripts file:
Let’s go through the code line by line:
Wrapping our whole code in an
IIFE (Immediately Invoked Function Expression). Just as a good practice in order to keep our variables scoped and to be able to escape out of the whole logic if we need to by simply returning.
Define our initial variables, get a DOM reference from our site notice HTML element and do nothing (return on line 5) if there’s no site notice to begin with (i.e. we haven’t set any text).
We’re storing the DOM reference of our dismiss button (so that we can attach a click handler later on) and allocate the two IDs:
noticeId is the current notice’s ID (the one that currently is in our document) and
storedNoticeId is the one we’ve stored in
localStorage from a previous dismiss click.
storedNoticeId could be
null if, for example, someone is visiting our website for the first time or has never dismissed any of our notices. That’s ok though!
Remember we always echo our notice’s HTML in the DOM (if there is any text assigned) and we initially just render it hidden via CSS.
By comparing what ID we’ve got stored in
storedNoticeId) with the current notice’s ID (
noticeId) we can determine if the user has already dismissed this specific one, and if they haven’t, we show it.
Finally the button’s click handler. It’s responsible for hiding the notice (via setting its
display property to
none) and storing its ID in
localStorage. The next time we refresh this ID will be the
storedNoticeId variable we mentioned and used before for the displaying logic.
Here’s how the full code looks and behaves (don’t blink or you’ll miss it – you can dismiss the notice and refresh the page, it won’t be there unless you change its ID):
And that’s about it! We have a fully functional, dismissible site-wide notice bar on our website ready to go. Building on top of what we just implemented we could also add functionality such as new customizer fields (i.e. images, setting custom colors) or even countdown timers and activation windows! If you happen to experiment with the code and enhance its functionality make sure to share with us in the comments below!