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

Web & Digital design and development

Specializing in custom WordPress site development and graphic design

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 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 to 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! The 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 include the <script></script>tags if you are to create your own JavaScript file, though.

CSS

/** Top bar **/
.top-bar {
    left: 0;
    right: 0;
    position: fixed;
    z-index: 1;
}
.top-bar p {s
  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>

If you are on the latest versions of GP Premium and make use of the Elements instead, you can also create a hook element type by heading to Appearance->Elements->Add New and choosing Hook from the dropdown selection box. Name the element, paste the javascript code, select wp_footer as a hook type then click on the Display Rules tab and for Location choose Entire Site. Then, publish the element and you should be good to go!

Hook element
GeneratePress footer hook element

There might be times where jQuery isn’t properly enqueued so you would have to force jQuery to load by adding the following code snippet to your functions.php file or a functionality plugin like Code Snippets:

add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
function tu_load_jquery() {
    wp_enqueue_script( 'jquery' );
}

If you have any problems with the “close” button not working the previous code should be able to resolve it.

As you can see the styling repositions the bar at the center top, adjusts the 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. Also, the bar stays visible and fixed on top of the page while scrolling. 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

You might notice that once the X mark is clicked to dismiss the top bar area, the footer at the bottom also moves up. To solve the issue, you can modify the CSS and Javascript accordingly:

CSS

/** Top bar **/
.top-bar {
    left: 0;
    right: 0;
    position: fixed;
    z-index: 1;
}
.top-bar p {
  margin-bottom: 0;
}
.top-close-button {
  float: right; 
  clear:right; 
  margin-top: -20px;
  cursor: pointer;
}
div#wpadminbar, .top-bar, .site-header, .main-navigation, .site {
    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]) {
    $( '.site-header, .main-navigation, .site' ).css( 'transform', 'translate(0, -52px)' );
    $( 'div#wpadminbar' ).css( 'transform', 'translate(0%, 20px)' );
} else {
  $( '.site-header, .main-navigation, .site' ).css( 'transform', 'translate(0, -52px)' );
}
    } );
} );
</script>

What we are doing here essentially is we target all the direct descendant elements of the body class except the .site-footer class. This trick will leave a margin above the footer though, so pick your poison and see what you like best or experiment with different selectors.

As a final note, 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 add-on 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!

17 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.

    Reply
  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!!

    Reply
  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.

    Reply
    • I believe the problem might be coming from the fact that jQuery is enqueued properly. Try this code into your functions.php or a functionality plugin like Code Snippets:

      add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
      function tu_load_jquery() {
      wp_enqueue_script( 'jquery' );
      }

      I have updated the article to include that case.

      Reply
  4. Thank you very much for this tip! A very simple and effective solution!

    I just added “position: fixed;” to the .top-bar so it rolls together with the page.

    Blessings

    Reply
    • Thanks for the kind words, glad it was useful. The fixed position is a great idea, I have edited my post accordingly, thank you!

      Reply
  5. Thanks for the excellent tutorial, unfortunately I notice after closing the bar it creates a white space at the bottom of the page the same height as the bar. I dropped you an email with the URL of the site.

    Any help much appreciated.

    Reply
    • Hi Andy. You have a point there as the script moves the whole body upwards! I have updated the tutorial with a solution to this, you can find it below the “Possible Improvements” heading.

      Reply

Leave a Reply to George Mitropapas Cancel reply

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

Ready to get started?

Contact me today to learn how I can help grow your business.