Web & Graphic designer.

Based in Edinburgh, UK. Specializing in custom WordPress site development and graphic design.

If you are a business seeking a web presence or an employer looking to hire, you can get in touch with me here.

GeneratePress theme tutorial: Convert the top widget bar into a notification window

GeneratePress theme tutorial: Convert the top widget bar into a notification window

A notification bar is useful if you want to show a site-wide message to your audience about certain news or a promotion that you offer in your online shop. There is a plethora of notification bars that can be found in the WordPress plugin repository or you can embed one yourself. GeneratePress has a top bar widget that can be activated from the Customizer so why not take advantage of what’s already available to us and save a few resources and HTTP requests? By going to Appearance->Customize->Widgets->Top Bar a of custom widgets can be added including custom menus, social icons, login information etc. But what if you wanted to add a notification bar that always needs to load at the top of the page but give the user the option to be able close it with the use of a close () button?

GeneratePress top bar widget area in the Customizer
GeneratePress top bar widget area in the Customizer

I recently asked that question in the GP Premium support forum and Tom Usborne (creator of GeneratePress) along with David gave me some great tips and code snippets (as always!) which I then applied to a test website with great results! First thing to do is to actually add a custom HTML widget to the top bar widget area. Just go to Appearance->Customize->Widgets->Top Bar and then click the Add a Widget button to add a Custom HTML widget. I used the following HTML code to add a paragraph and a Font Awesome icon inside the content custom HTML widget area:

<p>USE CODE: TE20 AND GET 10% DISCOUNT</p>
<i class="top-close-button fas fa-times-circle"></i>

Tip: Since GeneratePress 2.1 the Font Awesome library is not included by default anymore. Please, read this article to add the Font Awesome library to the theme.

In Appearance->Customize->Layout->Top Bar, I set the “Top Bar Width” to Full and “Top Bar Alignment” to Center. In Appearance->Customize->Colors->Top Bar, I chose a dark background color with white text.

Top bar layout options
Top bar layout options

Top bar color options
Top bar color options

Next we need to add some CSS and JavaScript code. CSS code can be added from the Customizer (Appearance->Customize->Additional CSS). JavaScript code is to be added to the wp_footer hook area (Appearance->GP Hooks, then select the wp_footer hook and paste the code). Alternatively, if you are not a GP Premium owner you should be able to enqueue the script yourselves. Make sure not to included the <script></script>tags if you are to create your own JavaScript file, though.

CSS

/** Top bar **/
.top-bar {
    left: 0;
    right: 0;
    z-index: 1;
}

.top-bar p {
  margin-bottom: 0;
}

.top-close-button {
  float: right; 
  clear:right; 
  margin-top: -20px;
  cursor: pointer;
}

body, div#wpadminbar, .top-bar {
    transition: transform 500ms ease;
}

 

JS

<script>
jQuery( document ).ready( function( $ ) {
    $( '.top-close-button' ).on( 'click', function( e ) {
        e.preventDefault();
$( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );

if ($('div#wpadminbar')[0]) {
    $( 'body' ).css( 'transform', 'translate(0, -52px)' );
    $( 'div#wpadminbar' ).css( 'transform', 'translate(0%, 20px)' );
} else {
  $( 'body' ).css( 'transform', 'translate(0, -52px)' );
}

    } );
} );
</script>

As you can see the styling  repositions the bar at the center top, adjusts spacing, relocates the close button at the top right of the bar and sets a few CSS transition effects that will be used when the bar is dismissed by the user. The JavaScript code dynamically adds a few classes when the top bar close button is pressed and sets different Y axis transformations to cater for the admin bar being present. Meaning that when the WordPress admin bar is present at the top of the user’s browser, the notification bar would need to be moved up and out of the browser screen and at the same time the whole page would need to move up without pushing the admin bar out of the way! You might also need to tinker with the values according to the height of your own bar.

Top bar without the admin bar
Top bar without the admin bar

 

Top bar with the admin bar visible
Top bar with the admin bar visible

Possible Improvements

Currently the bar would appear on every page refresh but you could set up a JavaScript Cookie and set up a conditional to show/hide the bar depended on whether this Cookie was set or not. A great alternative method though, as Dave Smith suggested in the post comments, is to use the Widget Options plugin or similar to set the HTML widget to only show on certain pages. Finally, if you are a GP Premium member you can disable the top bar individually for a particular page or post by using the Disable Elements addon module. The disable functionality can thus be activated and deactivated from the bottom of each page or post.

GeneratePress is a very powerful theme! Grab your copy here.

I provide advanced customization work for GeneratePress, so please get in touch if you need any work done.

Hope you found the tutorial useful. Till next time, keep Generating!

8 thoughts on “GeneratePress theme tutorial: Convert the top widget bar into a notification window”

  1. If you only want this to appear on certain pages you could use a plugin like Widget Options and set the HTML widget to only show on the Home Page or whatever pages you want it to appear on.

  2. Hi George, thanks a lot for your post, super useful 🙂 It made my day trying to get the top bar with the X icon, so thanks!!

    It could be any change, when you have enough time, to create the javascript code that allows you to set the cookie for the session or for the day, for example? I’m not a programmer and even with your link I’m not able to get it 🙁

    Thanks!!

  3. Hi, I followed your instructions, however unable to get the “x” dismiss button. Using GP on localhost for development. JS code added to elements (wp_footer) and the CSS has been added to Additional CSS in customizer. Am I missing out anything?

    Thanks in advance.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.