Most StudioPress themes include the header right widget by default. But what if you also want another header widget on the left side of your themes header?
In this tutorial, i’ll show you how easy it is to add a new widget to the left side of your themes header in Genesis.
This tutorial includes code for both XHTML and HTML 5 sites
You can see the real result of whats achieved in the image below.
Click to enlarge image:
Copy this code using the view raw link and paste it at the end of your child themes functions.php using a text editor like Notepad++.
Sites running XHTML
Now depending on which theme you are using, you may find the new widget outputs above the header or that its not inline with the right header widget. To fix this you can do 2 things:
- Float the new header widget to the left using CSS code
- Remove the site title & description header elements
Float Header Left
Paste this code at the end of your child themes style.css file. You can modify the values for the width and padding to suit your own needs.
#header .header-left {
float: left;
width: 30%;
}
#header {
padding-top: 30px;
}Remove Site Title & Description
Paste this code at the end of your child themes functions.php file.
Position
If you need to change the position of your header widget(s), you may find this tutorial about how to position a header widget useful. It also includes a link to another tutorial about how to style your header widget area.
Sites Running HTML 5
The code for sites running HTML is diffferent. Here’s the PHP code:
genesis_register_sidebar( array(
'id' => 'header-left',
'name' => __( 'Header Left', 'wpsitesdotnet' ),
'description' => __( 'Header left widget area', 'wpsitesdotnet' ),
) );
add_action( 'genesis_header', 'wpsites_left_header_widget', 11 );
function wpsites_left_header_widget() {
if (is_active_sidebar( 'header-left' ) ) {
genesis_widget_area( 'header-left', array(
'before' => '<div class="header-left widget-area">',
'after' => '</div>',
) );
}
}The class you use in the above PHP code can be changed to match the type of widget you use. An example for this is using the custom menu widget. You can change the class from header-left to genesis-nav-menu so it uses existing styling.
And here’s some sample CSS code:
.site-header .header-left {
float: left;
width: 30%;
overflow: hidden;
}
.site-header {
padding-top: 30px;
}Again, the CSS you use will depend on what you populate in your header left widget area.
Theme Options
Clearly, the CSS code above will need to be modified in some cases for themes which include other header elements besides the defaults mentioned above. This solution has been tested using the Sample child theme for Genesis.
Leave a Reply
You must be logged in to post a comment.