How to add a Utility Bar to the Altitude Pro Theme

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 the
genesis_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.