Add widget area above header in Genesis

Create a Utility Bar Above the Header in Genesis

Ever laid awake at night with a burning desire to create some widget areas above the header in a Genesis child theme?

Me neither.

But maybe during your waking hours you’ve thought it’d be cool. In that case, me too.

Genesis Tutorial: Create a “Utility Bar” Widget Area Above Header

Inspired by my Utility Pro theme, I’ve created a quick tutorial showing you how to add a full-width “Utility Bar” above the header in your Genesis child theme.

A Utility Bar would be fantastic for:

  • Shopping cart total
  • User login / account links
  • Custom menu
  • Site search bar
  • Whatever else you can think of…

Register the widget areas

If we’re going to add one widget area above the header, we might as well add two! We’re going to call our widgets “Utility Bar Left” and “Utility Bar Right.”

Add the code below to functions.php to register the two widget areas. As always, be careful when mucking about in your theme files – have a backup and FTP at the ready! If you’re not quite comfortable working in functions.php yet, try Genesis Extender plugin (and uncheck the “effect admin” option so you don’t accidentally white screen your admin area).

/** Register Utility Bar Widget Areas. */
genesis_register_sidebar( array(
'id' => 'utility-bar-left',
'name' => __( 'Utility Bar Left', 'theme-prefix' ),
'description' => __( 'This is the left utility bar above the header.', 'theme-prefix' ),
) );
genesis_register_sidebar( array(
'id' => 'utility-bar-right',
'name' => __( 'Utility Bar Right', 'theme-prefix' ),
'description' => __( 'This is the right utility bar above the header.', 'theme-prefix' ),
) );
view raw functions.php hosted with ❤ by GitHub

Once that’s in, you can go to Appearance > Widgets and you’ll see your new widget areas. Huzzah!

Utility Bar Widgets

Display the widget areas

Now that our widget areas are called into existence, we need to add a bit of code to get them to display on the site. In this case, I want the Utility Bar to show up everywhere on the site, not just the home page or a special template. (Tip: if you want it to show up only on certain pages, you need WordPress conditionals).

So, let’s head back to functions.php and add this:

add_action( 'genesis_before_header', 'utility_bar' );
/**
* Add utility bar above header.
*
* @author Carrie Dils
* @copyright Copyright (c) 2013, Carrie Dils
* @license GPL-2.0+
*/
function utility_bar() {
echo '<div class="utility-bar"><div class="wrap">';
genesis_widget_area( 'utility-bar-left', array(
'before' => '<div class="utility-bar-left">',
'after' => '</div>',
) );
genesis_widget_area( 'utility-bar-right', array(
'before' => '<div class="utility-bar-right">',
'after' => '</div>',
) );
echo '</div></div>';
}
view raw functions.php hosted with ❤ by GitHub

Let’s talk a little about this code. Please, don’t just plop it into your site. It’s more fun when you know why it works.

Genesis Action Hooks

One of my favorite things about the Genesis Framework is the ability to hook into just about any part of a page. Need to add a widget below the navigation? There’s a hook for that. Need to sandwich in a widget after a post but before the comments? There’s a hook for that also.

When we talk about a hook action, that just means let’s take one of those Genesis hook locations (a.k.a. above the header) and add our own stuff in that spot. (A hook filter, on the other hand, let’s you modify content that was going to show up anyway).

Since we want our Utility Bar to appear before the header, we’re going to use the genesis_before_header hook. The code below will add our function utility_bar at the spot on the page where genesis_before_header happens.

add_action( 'genesis_before_header', 'utility_bar' );

Our Custom Function

Still with me? Now we’re primed and ready. We just need to create a function called utility_bar and tell it what to do. In this case, that’s just spitting out our two widget areas.

For a better understanding of where you can use hooks on your own Genesis-powered site, check out the Genesis Visual Hook Plugin (one million internet points goes to Christopher Cochran for creating that plugin!)

Put a little style on it

The last bit of our journey here is to style our new Utility Bar widget areas. You’ll notice in the last step I added in a couple of divs with unique classes that we can target with some CSS.

Here’s what I’m using, but feel free to change up colors and fonts to suit your own needs:

/* Utility Bar
--------------------------------------------- */
.utility-bar {
background-color: #333;
border-bottom: 1px solid #ddd;
color: #ddd;
font-size: 12px;
font-size: 1.2rem;
padding: 10px 0;
padding: 1rem;
}
.utility-bar a {
color: #ccff33;
}
.utility-bar a:hover {
text-decoration: underline;
}
.utility-bar-left,
.utility-bar-right {
width: 50%;
}
.utility-bar-left p,
.utility-bar-right p {
margin-bottom: 0;
}
.utility-bar-left {
float: left;
}
.utility-bar-right {
float: right;
text-align: right;
}
.utility-bar input[type="search"] {
background: inherit;
padding: 10px 0 0;
padding: 1.0rem 0 0;
}
view raw style.css hosted with ❤ by GitHub

That’s it! Ready for the big reveal?

I Now Give You: Widget Area Above Header!

utility-bar-widget-area-above-header

As a side note, this code should work fine for Genesis 2.0 themes, with or without HTML5 enabled. You’ll probably need to play with the styling to get it just the way you want it.

Have fun playing and post a link to show off your Utility Bar!

Additional Learning Resources

Wanna learn more about customizing themes with the Genesis Framework? Or more about how to use CSS to style themes just the way you want? I’ve got two courses at Lynda.com just for you!

WordPress Themes: Customizing Themes with Genesis

Whether you’re a novice or advanced developer, Genesis provides a foundation that takes WordPress to places you never thought it could go. The Genesis Framework for WordPress is more than a mere WordPress theme; it’s an underlying framework of immaculate code offering three important benefits: SEO optimization, security, and a huge selection of design options. In this course, learn how to work with the framework in order to customize child themes. Carrie Dils discusses key aspects of Genesis—including template files and action hooks and filters—to help familiarize you with the structure and components that make up this framework. With a solid understanding of how Genesis operates, you can modify nearly any child theme.

Introduction to CSS

Once you have learned the basics of HTML, it’s time to start exploring Cascading Style Sheets (CSS), the language that makes HTML look great in the browser. This course gives you a tour of the possibilities, showing what CSS is capable of doing and the basics you need to make it work for you. Join Carrie Dils as she explains what CSS is and how it works with HTML, discusses authoring options, and covers common CSS concepts such as the CSS box model and how to work with fonts and color. Plus, she demonstrates how to structure a page with CSS, maintain CSS with version control, work with media queries, and more.

137 thoughts on “Create a Utility Bar Above the Header in Genesis”

  1. Pingback: How to customize a Genesis Blog — blog ambitions

  2. Pingback: Utility Bar in Dynamik - Sridhar Katakam

  3. Hi Carrie, this is great!

    I am wondering of this is possible to use under the header, not above. I use the genesis parallax pro theme.

    Kind Regards,

    Wim

    1. Yeah, Parallax has that “fixed” position header, so it might be hiding the Utility Bar when you move it below the header. If you haven’t already, install the Genesis Visual Hook Guide plugin and it’ll give you the exact hook names to use for moving stuff around.

      If it ends up that the header is hiding the Utility Bar, you’ll need to adjust the CSS for the Utility Bar with a margin-top or such to push it down the page a bit.

  4. Hi Carrie,

    I just changed genesis-before-header to gensis-after-header. It did not show anything. Than I changed it to genesis_before_content_sidebar_wrap and I am seeing it. Thanks!

    Just a quetion about the styling. If I put text in both left and right bars but … all the text displays on the left side.

    And when I put an menu in this utilitybar it is a vertical menu, not a horizontal.

    It would be nice if you could lead me in the right way.

    Kind Regards,

    Wim

    1. You can declare text alignment separately for both of these elements:

      .utility-bar-left { text-align: left }
      .utility-bar-right { text-align: right }

      (or something similar to that).

      As for the menus displaying vertically, you’ll need to add some CSS to for those

    2. ‘s to display inline and float left. Use Inspect Element in your browser to see how the main navigation menu is styled and follow that as an example.

  5. Hi!
    Love this, but I have the same problem as the commenter before. My navigation menu displays vertically and not horizontally. I’ve tried adding display: inline, but nothing is changing. What am I missing? BTWm I’m using this with the genesis framework.

    Kind regards,
    Maria

  6. Hi again,

    So I managed to solve the problem above my adding
    .menu li {
    display: inline-block;
    }

    to my css. I have another problem now. I can’t get my custom menu to work with drop downs. I know it has something to do with the fact that it’s not a primary menu, but I don’t know where to start to fix this. Should I change my css or moe the primary menu to the utility bar… I hope you can help me.

    Kind regards,
    Maria

  7. Hi Carrie,

    Great post! I’ve applied this to my site and have set up the boxes horizontally. The site looks great on the desktop but on mobile it looks bad. both left and right boxes are mixed together and unreadable. Is there a code I need to enter in css for the mobile version to match the desktop? Please advise. Thank you!

    -Rob

  8. How can I hide the utility bars on desktop and usethem on mobile only. I just need to know how to hide on desktop. Thanks

Comments are closed.

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.