head_ad

Add a Header Widget Area to the WordPress Twenty Twelve Theme

WordPress 3.5 is going to drop very soon. And with it comes the new Twenty Twelve theme as default. We’ve already started tweaking it on VoodooPress. So next up on our agenda was finding a little spot to put advertising. A widget area up top seemed like just the solution, so here is how we got that done!

You can use this technique to put a sidebar anywhere really, but I just wanted to spell it out specifically for 2012. You could also adjust where you want it to appear, it just seemed to fit nicely up top for me. I use it for advertising, and a login spot (which I haven’t finished styling yet, oops). I set up a nice semi-responsive Google Adsense widget to use up there, and I’ll cover how we did that very shortly – first up, the widget area!

In your functions.php file you can add the following. I actually keep this code in my functionality plugin, reason being – I always add a custom widget area to every theme, so I just put it in my plugin so it travels with me no matter what theme I use.

// Voodoo Registration Bar
// FIRST WE NEED TO REGISTER THE WIDGET AREA
// ADVERTISING SIDEBAR
function voodoo_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Advertising Sidebar', 'twentytwelve' ),
		'id' => 'voodoo-ad-widget-area',
		'description' => __( 'Horizontal Ad Widget', 'twentytwelve' ),
		'before_widget' => '<aside id="%1$s" class="top-widget %2$s">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
/** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
add_action( 'widgets_init', 'voodoo_widgets_init' );

That sets up our widget area to use shortly. It’s also set up with the appropriate classes and id for our purposes – it uses what we need from 2012 stylesheet, and gives us a class for custom styling, if needed. Next up we need to call the sidebar where we need it. Unfortunately, the only way to insert the sidebar into the header is to copy the header.php file from the parent theme (2012) to your child theme. And then we add some code into the file:

<body <?php body_class(); ?>>

<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">

<!-- Custom code starts here -->

<div id="voodoo-top-bar" class="widget">
		<?php if ( is_active_sidebar( 'voodoo-ad-widget-area' ) ) : ?>
			<div class="ad-widget-area">
				<?php dynamic_sidebar( 'voodoo-ad-widget-area' ); ?>
			</div><!-- .voodoo-ad-widget-area -->
		<?php endif; ?>
	<div class="clear"></div>
</div>

<!-- end of custom code -->

		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

We will get to styling in a moment. First up, here is another way to do what I just did above… we can throw just about everything into functions.php (or your functionality plugin):

// Voodoo Registration Bar
// FIRST WE NEED TO REGISTER THE WIDGET AREA
// ADVERTISING SIDEBAR
function voodoo_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Advertising Sidebar', 'twentytwelve' ),
		'id' => 'voodoo-ad-widget-area',
		'description' => __( 'Horizontal Ad Widget', 'twentytwelve' ),
		'before_widget' => '<aside id="%1$s" class="top-widget %2$s">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
/** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
add_action( 'widgets_init', 'voodoo_widgets_init' );

function voodoo_top_bar() { ?>
<div id="voodoo-top-bar" class="widget">
		<?php if ( is_active_sidebar( 'voodoo-ad-widget-area' ) ) : ?>
			<div class="ad-widget-area">
				<?php dynamic_sidebar( 'voodoo-ad-widget-area' ); ?>
			</div><!-- .voodoo-ad-widget-area -->
		<?php endif; ?>
	<div class="clear"></div>
</div>
<?php }

And then in header.php we simply have:

<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">

<!-- custom code -->
	<?php if ( function_exists( 'voodoo_top_bar' ) ) {
		voodoo_top_bar();
	} ?>

<!-- end custom code -->
		<hgroup>
			<h1 class

That keeps things nice and clean right? Now there isn’t much styling to speak of. The mian reason for me is that I give my new widget area the class of .widget, so it picks up the styling we covered in this previous tutorial. Even without those custom styles, everything will follow along with the 2012 default style. If yours isn’t set up that way, you may need additional styling. All I have in my child theme style.css is:

.clear {
	clear: both;
}

Which is a bit hacky, but works well for inserting things like Google Ads, which just do not behave! So that is it for this quick run through, I just wanted to show adding a basic widget area up top there. I’ll try to go a little further tomorrow, giving all my code that I use to have my ads, as well as the login/registration bit. You might not want to have a login portion up there, but maybe my code can help give you ideas when adding multiple things to the new top widget area – it’s so important to keep 2012′s responsive nature in mind, In the final post for this mini series, we even show you a technique for adding somewhat responsive Google Ads to your theme, and we turn that into a simple widget.

4 thoughts on “Add a Header Widget Area to the WordPress Twenty Twelve Theme”

  1. Nice tutorial, a widget area is easier to use once it’s coded than manually entering the code everytime a theme update comes out or themes are changed. This could probably be turned into a plugin which you’ve pretty much done already.

    The only issue I see with it is most users display their site title. If that were the case I found that a 468×60 adsense looks great floated to the right. Here’s a screenshot http://img842.imageshack.us/img842/9393/snap20121127at021250.png

    Since your site is wider than most, using the slightly smaller adsense would probably allow for enough room for the Ad and the login from your other post, with the site title still showing on a default size Twenty Twelve theme. I’ll probably use this and your other tutorial to add it to my own site later this week.

    Thanks

    1. You know what…? I totally forgot that you could even display your site title up there!! I have never shown mine, opting instead for just my logo image, so I forgot to account for it! I’m glad you mentioned it, future readers may want to take that into account! My newest post also has ways to swap out the Google ad being shown up top depending on screen size, which is kind of a handy trick *at least for me).

    1. I’m very glad that you found this information helpful! Thanks for the comment! It’s always nice to know when someone finds what I write useful. And thanks for the clicks, every cent helps me pay my server costs!

Leave a Reply