Cacher is the code snippet organizer for pro developers

/* 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;
}

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

/** 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: */

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>';
 
}

/** 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!

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

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

NOTE TO SELF: looks like a great way to add a sticky widget area above the header. May want to use for Zamir member login button....