As I’ve started to exclusively use the Genesis Framework for all of my sites I’ve started to compile a small bag of tricks. Mostly they are quick code snippets that either add/remove or filter functionality. One that I thought would be useful to share and that I’ve added to my child theme of Genesis, adds a “utility bar” above the header. A utility bar is an area that you can use for whatever floats your boat. You may use it to add some quick contact information or social icons. It could even be used to include a widget area which is most likely where I will be going next so that clients can manage it. If you are looking to include something that like that on your Genesis site…read on!

The first step in adding this section to your site is finding the right hook to use to get it to display above the page Genesis page header. Whenever I’m looking to find a hook or place to add an action I always turn to the visual hook guide put out by genesistutorials.com.

If you look at that guide, you will see that we need to add our code to the hook titled “genesis_before_header”. This will place our utility header right above the page header. Simple enough right? Next of course we need to create the code that will be added to this section of the page. In the functions.php file you will need to add the following code:

As you will see we are simply adding some HTML that will be dropped in above the header code. I’ve simply added some social icons (using font awesome so make sure you have that loaded) and that’s it for now but the possibilities are endless.

Of course now that you have that code loading on your page, you will need to add some css to make it look the way you want. Here is what I’m using:

So there you have it… a nice, clean, simple utility bar that you can add above the Genesis header quick and easy.

If you are using it on your site, let us know what you included!