Add Top Bar Widget to Genesis

Those bars running across the top of sites are great for getting attention, but most of the Genesis themes don’t have an option to add them. Here’s how to get one that looks like this:

Add this to your functions.php file:
(Remember to always, always back up your php files before making changes to them.)

/** Register Top Bar Widget Area. */
genesis_register_sidebar( array(
'id' => 'top-bar',
'name' => __( 'Top Bar', 'theme-prefix' ),
'description' => __( 'This is the top bar above the header.', 'theme-prefix' ),
) );
add_action( 'genesis_before_header', 'utility_bar' );
function top_bar() {
 
	echo '
';
 
	genesis_widget_area( 'top-bar', array(
		'before' => '
',
		'after' => '
',
	) );
 
	echo '
';
}
add_action( 'genesis_before', 'top_bar' );

Then, add a little code to your style.css file to style the area:

.top-bar {
	background-color: #fe9321;
	color: #fff;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 2.5px;
	padding: 3px 0;
	padding: 1rem;
	text-align: center;
}

Then simply put a widget into the Top Bar area under Appearance > Widgets, and you’ll be all set!