Widget Area Above Header

[bhardwick]

from

This was very helpful and allowed me to have a news ticker at the top of the website. Carrie Rocks!

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.

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!

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.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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 utility-widgets-before-header.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.
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 with some CSS.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

/* 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 utility-widgets.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!

http://www.carriedils.com/widget-arehttp://www.carriedils.com/widget-area-above-header-genesis/

[Susan]

Thanks for sharing!

[paginapress]

Hello, thank you for sharing. It doesn't work with Centric Pro theme. Do you know another way that should work?

[Author]

Posts