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 🙂
Done, and done! That was easy. Thank you! 🙂
Thumbs up, Iggy!
Code put my sidebar widget in the header.
Changed header code to
Well, can’t post php code, so inside the php tags was:
if ( !function_exists(‘dynamic_sidebar’) ||
!dynamic_sidebar(‘Header Widgets Area’) ) : endif;
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?
put it in a div, give the div an id and float it right.
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.
Sorry, I meant under the closing hgroup tag in the header.php file.
another css newbie here.
+1 for how to put this to the right of the title area – the top right of the page
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;
}
Thank you very very much.I able to do this. But I don’t understand what is meant by %1$s and %2$s .
Just leave it as is, It will create ID and a class.
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?
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
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