{"id":803,"date":"2018-05-29T17:04:26","date_gmt":"2018-05-29T16:04:26","guid":{"rendered":"https:\/\/www.gmitropapas.com\/?p=803"},"modified":"2020-06-15T02:37:47","modified_gmt":"2020-06-15T01:37:47","slug":"generatepress-theme-tutorial-convert-the-top-widget-bar-into-a-notification-window","status":"publish","type":"post","link":"https:\/\/www.gmitropapas.com\/generatepress-theme-tutorial-convert-the-top-widget-bar-into-a-notification-window\/","title":{"rendered":"GeneratePress theme tutorial: Convert the top widget bar into a notification window"},"content":{"rendered":"\n

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<\/a> or you can embed one yourself<\/a>. 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<\/strong> 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?<\/p>\n\n\n\n

\"GeneratePress
GeneratePress top bar widget area in the Customizer<\/figcaption><\/figure>\n\n\n\n

I recently asked that question in the GP Premium support forum<\/a> 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 <\/strong>and then click the Add a Widget<\/strong> button to add a Custom HTML widget<\/strong>. I used the following HTML code to add a paragraph and a Font Awesome icon inside the content custom HTML widget area:<\/p>\n\n\n\n

<p>USE CODE: TE20 AND GET 10% DISCOUNT<\/p>\n<i class=\"top-close-button fas fa-times-circle\"><\/i><\/pre>\n\n\n\n
Tip:<\/strong> Since GeneratePress 2.1 the Font Awesome library is not included by default anymore<\/a>. Please, read this article<\/a> to add the Font Awesome library to the theme.<\/p><\/blockquote>\n\n\n\n
In Appearance->Customize->Layout->Top Bar<\/strong>, I set the “Top Bar Width” to Full<\/strong> and “Top Bar Alignment” to Center<\/strong>. In Appearance->Customize->Colors->Top Bar<\/strong>, I chose a dark background color with white text.<\/strong><\/p>\n\n\n\n
\n
\n
\"Top
Top bar layout options<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"Top
Top bar color options<\/figcaption><\/figure>\n\n\n\n
<\/p>\n<\/div>\n<\/div>\n\n\n\n
Next we need to add some CSS and JavaScript code. CSS code can be added from the Customizer (Appearance->Customize->Additional CSS<\/strong>). JavaScript code is to be added to the wp_footer hook area (Appearance->GP Hooks<\/strong>, then select the wp_footer<\/strong> 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><\/code>tags if you are to create your own JavaScript file, though.<\/p>\n\n\n\n
\n
\n
CSS<\/h3>\n\n\n\n
\/** Top bar **\/\n.top-bar {\n    left: 0;\n    right: 0;\n    position: fixed;\n    z-index: 1;\n}\n.top-bar p {s\n  margin-bottom: 0;\n}\n.top-close-button {\n  float: right; \n  clear:right; \n  margin-top: -20px;\n  cursor: pointer;\n}\nbody, div#wpadminbar, .top-bar {\n    transition: transform 500ms ease;\n}<\/pre>\n<\/div>\n\n\n\n
\n
JS<\/h3>\n\n\n\n
<script>\njQuery( document ).ready( function( $ ) {\n    $( '.top-close-button' ).on( 'click', function( e ) {\n        e.preventDefault();\n$( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );\nif ($('div#wpadminbar')[0]) {\n    $( 'body' ).css( 'transform', 'translate(0, -52px)' );\n    $( 'div#wpadminbar' ).css( 'transform', 'translate(0%, 20px)' );\n} else {\n  $( 'body' ).css( 'transform', 'translate(0, -52px)' );\n}\n    } );\n} );\n<\/script><\/pre>\n<\/div>\n<\/div>\n\n\n\n
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<\/strong> and choosing Hook from the dropdown selection box. Name the element, paste the javascript code, select wp_footer<\/strong> as a hook type then click on the Display Rules<\/strong> tab and for Location<\/strong> choose Entire Site<\/strong>. Then, publish the element and you should be good to go!<\/p>\n\n\n\n
\"Hook
GeneratePress footer hook element<\/figcaption><\/figure>\n\n\n\n
There might be times where jQuery isn\u2019t properly enqueued so you would have to force jQuery to load by adding the following code snippet to your functions.php<\/strong> file or a functionality plugin like Code Snippets<\/a>:<\/p>\n\n\n\n
add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );\nfunction tu_load_jquery() {\n    wp_enqueue_script( 'jquery' );\n}<\/pre>\n\n\n\n
If you have any problems with the “close”<\/strong> button not working the previous code should be able to resolve it.<\/em><\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\"Top
Top bar without the admin bar<\/figcaption><\/figure>\n\n\n\n
\"Top
Top bar with the admin bar visible<\/figcaption><\/figure>\n\n\n\n
Possible Improvements<\/h2>\n\n\n\n
You might notice that once the X<\/strong> 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:<\/p>\n\n\n\n
\n
\n
CSS<\/h3>\n\n\n\n
\/** Top bar **\/\n.top-bar {\n    left: 0;\n    right: 0;\n    position: fixed;\n    z-index: 1;\n}\n.top-bar p {\n  margin-bottom: 0;\n}\n.top-close-button {\n  float: right; \n  clear:right; \n  margin-top: -20px;\n  cursor: pointer;\n}\ndiv#wpadminbar, .top-bar, .site-header, .main-navigation, .site {\n    transition: transform 500ms ease;\n}<\/pre>\n<\/div>\n\n\n\n
\n
JS<\/h3>\n\n\n\n
<script>\njQuery( document ).ready( function( $ ) {\n    $( '.top-close-button' ).on( 'click', function( e ) {\n        e.preventDefault();\n$( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );\nif ($('div#wpadminbar')[0]) {\n    $( '.site-header, .main-navigation, .site' ).css( 'transform', 'translate(0, -52px)' );\n    $( 'div#wpadminbar' ).css( 'transform', 'translate(0%, 20px)' );\n} else {\n  $( '.site-header, .main-navigation, .site' ).css( 'transform', 'translate(0, -52px)' );\n}\n    } );\n} );\n<\/script><\/pre>\n<\/div>\n<\/div>\n\n\n\n
What we are doing here essentially is we target all the direct descendant elements of the body class except the .site-footer<\/code> 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.<\/p>\n\n\n\n
As a final note, the bar would appear on every page refresh but you could set up a JavaScript Cookie<\/a> 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<\/a> 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<\/strong> add-on module. The disable functionality can thus be activated and deactivated from the bottom of each page or post.<\/p>\n\n\n\n
GeneratePress is a very powerful theme! Grab your copy here<\/a>.<\/p>\n\n\n\n
I provide advanced customization work for GeneratePress<\/a>, so please get in touch<\/a> if you need any work done.<\/p>\n\n\n\n
Hope you found the tutorial useful. Till next time, keep Generating<\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to add a closeable top notification bar in GeneratePress. Save a few resources and HTTP requests. <\/p>\n
Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":813,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"GeneratePress - WordPress theme tutorial: Convert the top widget bar into a notification window","_seopress_titles_desc":"Learn how to add a closeable top notification bar in GeneratePress. Save a few resources and HTTP requests.","_seopress_robots_index":"","footnotes":"","_vp_format_video_url":"","_vp_image_focal_point":[]},"categories":[1],"tags":[29,26,30,24],"acf":[],"_links":{"self":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/posts\/803"}],"collection":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/comments?post=803"}],"version-history":[{"count":0,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/posts\/803\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/media\/813"}],"wp:attachment":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/media?parent=803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/categories?post=803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/tags?post=803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}