WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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.

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.

More Ways To Add Widgets In Your Header

Reader Interactions

Comments

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

  3. 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 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!
        Elise

  5. 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!

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

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

  8. 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!

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

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

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

Leave a Reply