How to show a custom widget area in Header when using Genesis

Adam asks,

Hi, I built the following site using the Generate Pro child theme: http://waynehilsden.com/

Currently, the header is an image that includes text and a photo, but it is all one png file (the header area has been enlarged to 635 x 160 btw). I would like the header to behave as a widget, with the portrait aligned left, and the text aligned right, so that on mobile devices, the text will appear below the photo in the header.

Any advice on how to do this? Thanks.

In this article I show how the standard header in Genesis can be replaced with contents of a custom widget area.

Before

generate-pro-header-before

After

generate-pro-header-after

Note that the CSS provided is meant for Generate Pro and may need to be adjusted if you are using another Genesis child theme.

We are going to

  • remove the built-in header right widget area
  • register a custom sidebar (widget area)
  • remove the default header
  • display custom widget area in .site-header
  • drag a text widget in the Header widget area and add HTML to display a logo image and some text
  • write CSS for smaller screen widths to center both the logo and text and to make the text appear below the logo

Add the following in child theme’s functions.php:

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
<?php
//* Do NOT include the opening php tag
 
//* Remove the header right widget area
unregister_sidebar( 'header-right' );
 
//* Register 'Header' widget area
genesis_register_sidebar( array(
'id' => 'header',
'name' => __( 'Header', 'generate' ),
'description' => __( 'This is the header widget area.', 'generate' ),
) );
 
//* Remove the default header
remove_action( 'genesis_header', 'genesis_do_header' );
 
//* Add custom header
add_action( 'genesis_header', 'sk_do_header' );
function sk_do_header() {
 
genesis_widget_area( 'header', array(
'before' => '<div class="header widget-area">',
'after' => '</div>',
) );
 
}
view raw functions.php hosted with ❤ by GitHub

and the following in child theme’s style.css:

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
.site-header {
min-height: 0;
}
 
.site-header .widget-area {
float: none;
width: auto;
text-align: left;
padding-bottom: 40px;
}
 
.site-header img {
vertical-align: middle;
}
 
.custom-site-title {
font-size: 20px;
padding-left: 10px;
}
 
@media only screen and (max-width: 1023px) {
 
.site-header .widget-area {
padding-top: 40px;
}
 
}
 
@media only screen and (max-width: 568px) {
 
.site-header .widget-area {
text-align: center;
}
 
.site-header span.custom-site-title {
display: block;
margin-top: 40px;
}
 
}
view raw style.css hosted with ❤ by GitHub

At Appearance > Widgets, drag a text widget into the Header widget area, paste the following sample HTML and modify:

1
<a href="http://generate-pro.dev/"><img src="http://cl.ly/image/3C3x2U3x2h0Q/200x90-Logo.gif" alt="My Logo" /></a> <span class="custom-site-title">This is your custom site title coming from a widget</span>
view raw widget.html hosted with ❤ by GitHub

widgets-generate-pro