• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WPbasics - A beginner's resource for WordPress

  • Blog
    • Tutorials
    • Articles
    • Showcase
    • Themes
    • Plugins
  • Recommended Hosts
  • About
  • Contact Us

How to add a Utility Bar to the Altitude Pro Theme

Last updated on July 17, 2019 3 Comments

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.

How to add a Utility Bar to the Altitude Pro Theme

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.

Tagged With: Altitude Pro, jQuery

Reader Interactions

Comments

  1. Mar says

    September 4, 2018 at 12:08 pm

    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.

    Reply
  2. Greg Klamt says

    May 10, 2019 at 1:09 pm

    Does not work for me either. I would also like to see it permanent, not just on scroll.

    Reply
    • WPbasics says

      May 13, 2019 at 11:56 am

      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.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Search this site

Popular Posts

  • How to copy a live WordPress site to a local host | Duplicator
  • How to add a jQuery UI Accordion to WordPress
  • How to copy a live WordPress site to a localhost
  • How to Use FileZilla | FTP Client
  • How to Create a Localhost with local by Flywheel

Recent Posts

  • How to Install a MailChimp Popup in WordPress
  • Googles reCaptcha slow mobile site
  • Check if your site is indexed by Search Engines
  • ACF Blocks | Gutenberg
  • ACF Blocks for Gutenberg | Introducing ACF 5.8
SEE MORE POSTS

Footer

Site Links

  • Affiliate Disclosure

Contact

  • Email
  • Twitter
  • Facebook

About WPbasics

WPbasics was created to assist WordPress Beginners. This site provides tutorial, reviews, and access to deals on products used by WordPress users.

Copyright © 2022 · WPbasics ·

Enter your name and email and get the weekly newsletter... it's FREE!
Signup today and be the first to get notified on new updates
Your information will *never* be shared or sold to a 3rd party.