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).

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

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:

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:

That’s it! Ready for the big reveal?

I Now Give You: 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.