Hello folks, in this tutorial we will learn How to add a Utility Bar to the Altitude Pro Theme.
There are a number of tutorials out there that will show you how to add a Utility Bar to a StudioPress theme.
Carrie Dills has a tutorial on how to add a widget area above the header; her tutorial can be found at this website https://carriedils.com/widget-area-above-header-genesis/ .
But these tutorials do not seem to work with the StudioPress theme Altitude Pro without modification. So I have decided to write my own tutorial that is specifically designed for the Altitude Pro theme. If you follow the steps below, you should have a Utility Bar like this one in no time.

Step 1
The first thing that we want to do is to register a widget area for our Utility Bar.
Go ahead and paste this code to the functions.php file.
//* Register utility bar widget area genesis_register_sidebar( array( 'id' => 'utility-bar', 'name' => __( 'Utility Bar', 'Altitude' ), 'description' => __( 'This is the utility bar widget area.', 'Altitude' ), ) );
Step 2
Next, we need to add the markup for our widget area by hooking it to thegenesis_before_header
hook. Go ahead and add the following code to your functions.php file;
//* Hook utility bar to genesis_before_header add_action( 'genesis_before_header', 'wpb_utility_bar' ); function wpb_utility_bar() { genesis_widget_area( 'utility-bar', array( 'before' => '<div class="utility-bar">', 'after' => '</div>', ) ); }
Step 3
Next we need to create a javascript file that will add or remove some CSS when we scroll. Go ahead and create a file called utility-bar.js
in your js directory.
Now go ahead and add the following code to the utility-bar.js
file;
jQuery(function( $ ){ // Add reveal class to utility bar after 50px $(document).on("scroll", function(){ var height = $(".utility-bar")[0].clientHeight; if($(document).scrollTop() > 50){ $(".site-header.dark").css("top",height+"px"); $(".utility-bar").addClass("reveal"); } else { $(".site-header.dark").css("top",0+"px"); $(".utility-bar").removeClass("reveal"); } }); });
Step 4
Next, we need to load the javascript file that we just created. Go ahead and add the following code to your functions.php file.
//* Enqueue scripts and styles add_action( 'wp_enqueue_scripts', 'utility_bar_script' ); function utility_bar_script() { wp_enqueue_script( 'utility_bar', get_bloginfo( 'stylesheet_directory' ) . '/js/utility-bar.js', array( 'jquery' ), '1.0.0' ); }
Step 5
The final step is to add some styling to the style.css file.
Go ahead and paste the following code to the bottom of your style.css file;
/* Utility Bar ---------------------------------------------------------------------------------------------------- */ .utility-bar { background-color: #d72607; font-size: 24px; font-size: 2.4rem; color:#fff; font-weight: 700; opacity: 0; padding: 15px 10px; position: fixed; text-align: center; width: 100%; text-transform: uppercase; } .utility-bar p { margin-bottom: 0; } .utility-bar.reveal { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: 1; z-index: 99999; top: 0; }
That’s it! That’s all there is to it. You should now have a working utility bar.
Thanks for the tutorial. Unfortenately its not really working for me. Sometimes it just leaves a open space above the site-header. Could you maybel explain how to just make the bar sticky above the site-header? I dont really need it to reveal on scroll. Thanks in advance.
Does not work for me either. I would also like to see it permanent, not just on scroll.
In order to diagnose, more information is required. Are you receiving and error message? If so, what is the error message. Please provide as much detail as possible.
FOLLOW UP:
I have tested this tutorial and the code works as intended.