Add New Dynamic Widgets Area in Header of Your Child Theme with TwentyTwelve Parent

This is a short tutorial on how to add a new dynamic widgets area to a custom header of a child theme with Twenty Twelve parent new WordPress Theme.

Add this code in your child theme‘s functions.php (you already have this file in your child theme, if not, just create one, and add php marks for code block)

//add a widget area in the header 

if ( function_exists ('register_sidebar') )

register_sidebar( array(

  'name' => __( 'Header Widgets Area', 'twentytwelve' ),
  'id' => 'sidebar-header',
  'description' => __( 'A new header widgets area for my child them' ,  'twentytwelve' ),
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

add_action( 'widgets_init', 'twentytwelve_widgets_init' );

You can see now in your widgets admin page, there is a new widgets area added on top.Β Let’s make it functional.

Add a new file called sidebar-header.php into your child theme folder root. Insert the following code to the file:

<?php if ( is_active_sidebar( 'sidebar-header' ) ) : ?>
		<div id="headWidgets" role="complementary">
			<?php dynamic_sidebar( 'sidebar-header' ); ?>
		</div>
<?php endif; ?>

Now just call the new dynamic widgets from custom header.php file of your child theme (or add a copy of parent’s file into child theme folder and insert this code where needed)

<?php get_sidebar( 'header' ); ?>

Everything should work as expected now, just write some custom CSS for the new area. Nothing will stop us to add such area also into our custom footer πŸ™‚

Share:
This entry was posted in WordPress and tagged . Bookmark the permalink.

15 Responses to Add New Dynamic Widgets Area in Header of Your Child Theme with TwentyTwelve Parent

  1. Susan Langenes says:

    Done, and done! That was easy. Thank you! πŸ™‚

  2. Melker says:

    Thumbs up, Iggy!

  3. Tom Hart says:

    Code put my sidebar widget in the header.
    Changed header code to

  4. Tom Hart says:

    Well, can’t post php code, so inside the php tags was:
    if ( !function_exists(‘dynamic_sidebar’) ||
    !dynamic_sidebar(‘Header Widgets Area’) ) : endif;

  5. Alexandra says:

    Thanks for this! Works pretty well, even for a newbie like me…

    I’ve got everything working up to the custom CSS…
    Right now, the widget area appears above my site name/tagline/banner. I’d like it to appear right-justified to the right of the site name/tagline, and above the banner image.

    Any suggestions for how to do this, or where I should look to find more info?

    • neterhet says:

      put it in a div, give the div an id and float it right.

    • Caro says:

      Just put the php code that calls the widget directly under the closing tag in the header.php file. Then use g book’s css:

      #headWidgets{
      position: relative;
      margin-top: -135px;
      float: right;
      margin-right: 10px;
      }

      to position it.

    • Caro says:

      Sorry, I meant under the closing hgroup tag in the header.php file.

  6. g book says:

    another css newbie here.
    +1 for how to put this to the right of the title area – the top right of the page

  7. g book says:

    after some random digging around in the dark, this seems to work:
    (put in styles.css file)

    #headWidgets{
    position: relative;
    margin-top: -135px;
    float: right;
    margin-right: 10px;
    }

  8. Thank you very very much.I able to do this. But I don’t understand what is meant by %1$s and %2$s .

  9. Aes says:

    I’m working on a local site and this works great!

    Now, just for learning purposes for example I added an address in a text widget in this new header widget area. How would might I make it drop down a little without having it push the h1 and h2 heading areas push down also?

  10. Colin says:

    Hi, this has crashed my Dynamix theme and my site. I edited functions.php swapping code in their for your code now i cant go into the editor nothing. Please help. I just want to be able to put in a newsletter widget in my header and i cant do it easily…..how to i get the theme working again i wont let me reinstall nothing?

    thanks

    Colin, Ireland

  11. Colin says:

    I have spent two weeks working on my site please dont tell me i have lost everything πŸ™ please can anyone help??????????????????? This is really bad.

    thanks

    Colin

Leave a Reply

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