Genesis Tutorials

Add Header Left Widget In Genesis

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:

left header widget

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:

  1. Float the new header widget to the left using CSS code
  2. 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.


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.

More Ways To Add Widgets In Your Header

31 replies on “Add Header Left Widget In 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.



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:

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.

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…

.simple-social-icons {
	padding-right: 10px;
	float: right;
	margin-top: -90px;

.textwidget .AuthorizeNetSeal {
	float: left;

.site-header .genesis-nav-menu {
	margin-top: -150px;
	margin-left: 130px;
	width: 80%;

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!

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.

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’ );

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.

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!

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.

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
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 🙂

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 Codex.

Leave a Reply

Your email address will not be published. Required fields are marked *