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.
I followed your tutorial on adding a header-left widget to genesis child themes. I am working on a project that requires me to have ‘header-left’, ‘header-middle’ and ‘header-right’ widgets all at the same time.
Please what is the code to achieve this; and also make it responsive. I intend applying this to the parallex pro and altitude pro child themes.
Thanks
Here’s 3 options http://wpsites.net/web-design/responsive-inline-header-widgets-side-by-side-in-studiopress-themes/
You may need to modify the CSS for padding and margins depending on the theme.
Can we use this where the widget is in the center instead of the left side?
You could add a big margin-left to it and leave space for an image or text on the left.
Or maybe use a width.
Or you could remove all the header elements and add back 2 or 3 widgets at different widths.
Hello,
I successfully placed my left header widget but the image that i placed in the widget area won’t float to the top.
Here’s my website: http://iskr.org
Could you take a look?
I’m using the StudioPress Education Theme and have changed some CSS to let the right header widget display a wider menu.
You could try using the Custom Header uploader.
Hi Brad, What do you do if you want to keep the logo, but add a header widget to the left of the right header and to the right of the logo?
You populate the header right widget with 2 widgets and use CSS code to float one widget to the left and one to the right.
You will need to use the correct widget classes or the widget section i.d’s.
No need to add another widget area, however you can do this if you really want to.
Thanks, Brad! That sounds much easier! I somewhat figured it out. Here is my code…
I can’t seem to get the menu bar to go up any more. What am I missing?
Hi Brad, thanks for the tutorial!
I would actually like to add another widget area as I can’t get it to behave properly by just using one of the existing as per the above comments.
How do I do this? I tried duplicating the code with new names but that didn’t work. I’m using Minimum theme with the logo to the left plus I’ve added in header right and header left but I’d like to add one more to the right so that it’s in 4 sections.
Thanks so much!
Elise
Please use the contact form on my site.
Hello Brad,
Your code worked perfectly… but I was wondering if there is a simple fix for the new Header Left Widget covering the logo now? I have researched and found that the problem is most likely because the logo is set to the background. I’m just unsure how to bring that layer forward.
Thank you in advance for your help!
You can use CSS with the class for the header left widget to reposition it.
If you want to style it, you use the section i.d class for the specific widget you populate in that widget area as well.http://wpsites.net/web-design/style-widgets-individually-beginners-guide/
I have updated the post with code for sites running HTML 5 however the CSS depends on other factors including your header image, the size and position of your image and what widget you populate in the header left area.
Hey, I recommend you remove the header and add it back in after. This will structure the markup in a cleaner way.
remove_action( ‘genesis_header’, ‘genesis_do_header’ );
add_action( ‘genesis_header’, ‘wpsites_left_header_widget’ );
add_action( ‘genesis_header’, ‘genesis_do_header’ );
Thanks Kevin
Andrea in technical support told me that. I removed genesis from the call and it worked. Strange that’s it’s working for you and StudioPress still has it listed in the tutorial section of the site so I don’t know what to think. Now the remove site title and description commands aren’t working either. I’ve tried uninstalling and reinstalling Genesis which made no change. Something is clearly not right though.
Yeah not sure what the problem is to be honest.
Thanks for the feedback.
Hello Brad, I added this to my child theme, using Genesis Sample, and got this error message… Fatal error: Call to undefined function genesis_register_sidebar(). I’ve triple checked that I’m using the code as you provided it. What might I be doing wrong?
Hello Melanie.
Just tested the PHP code and it works.
Please copy the PHP code from the view raw link and paste it at the end of your child themes functions.php file using a text editor like Notepad++
Sometimes when you copy and paste the code directly from a web page rather than the raw view, it will turn the single quotes around.
You could also use this PHP code. Don’t forget to add the CSS as well to float the widget left.
Thanks for checking it, not that I doubted your code, rather I think there is something wrong on my end. I have been copying from the raw view and just tried it again.. still getting the same error. It’s as if it doesn’t want to register a function at all. Like something is not connecting with Genesis maybe. I’ll try to forum and see what I can find.
Thank you!
Just to follow up.. that function was removed from Genesis and they referred me to adding a WordPress function instead. http://codex.wordpress.org/Widgetizing_Themes
Guess I’ll give it a go!
Thanks again!
Nope. Tested the code multiple times and it works perfectly.
Who told you it was removed?
Does this code work in the Prose theme? I can’t seem to get the widget to appear in the Appearances/Widget screen.
Hi Michael
All child themes are slightly different so the code can only be used as a guide unless you use it on the theme i tested it on.
You will need to tweak the code for other themes however some are the same when it comes to the header.
Its very time consuming to test it on every theme.
Understood and well said. I did find the solution by combining information from these two pages. http://designsbynickthegeek.com/tutorials/add-widgeted-sidebar and http://wpsites.net/web-design/add-header-left-widget-genesis/. I trust this helps other trying to accomplish the same task.
I have tried !is_archive() and that should remove it from all the posts and categories but its not working. I also tried to target the blog template pages, and that doesnt work either, is if ( is_page() ) over-writing the second part??
Could be. I normally test all this stuff locally and sometimes it takes a while to get it right but you will get there.
Maybe the example’s on the WP Codex may help.
Hi Brad -revisiting this again on a site I have done. I need the left header on only pages, and not posts themselves. What would be the function for it only to be on those pages. I have been using:
/**
* @author Brad Dalton WP Sites
* @learn more http://wp.me/p1lTu0-9VA
*/
add_action( ‘genesis_header’, ‘wpsites_left_header_widget’, 11 );
function wpsites_left_header_widget() {
if (!is_page() && is_active_sidebar( ‘header-left’ ) ) {
echo ”;
dynamic_sidebar( ‘header-left’ );
echo ‘‘;
}}
Thanks again for your help 🙂
Remove the !
Ha! Duh – I see now – but now its on the blog page itself since that is a page and not a post. So what would I add or change to exclude that page only and all posts? Thanks again for the help! I am learning so much from all you guys and I hope to be able to help others someday too! 🙂
You would need to modify the conditional tags:
Try something like this:
if (is_page() || !is_archive() || !is_category() && is_active_sidebar( ‘header-left’ ) ) {
You’ll find a full list of conditional tags withe examples on the WordPress.org Codex.