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
Below is a quick tutorial to show 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 this code to functions.php to register the two widget areas (as always, be careful when mucking about in functions.php – have a backup and FTP at the ready):
/** 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' ),
) );
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.
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.
The Genesis Action
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 something above the header? There’s a hook for that. Need to sandwich in something between the end of a post and the beginning of 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 hook locations Genesis provides (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 what was going to pop out 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 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 we 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!