Adding a Login Function to Our Twenty Twelve Header Widget Area – And Responsiveness Considerations

Yesterday, we started the basics for adding a widget area to the soon to be new default WordPress Twenty Twelve theme. I personally wanted to have advertising up there, plus login and registration options. I use custom login and registration pages on VoodooPress, so the standard links don’t work – I need to provide working links. I’m going to show my code for adding that login feature, of course. But I also want to show you this for a bigger reason – 2012 has a responsive setup and if you alter the theme, you need to consider that with your changes. Let’s take a look at what I have now!

So the first thing I want to set up here is the additional code necessary to add in my login feature.

I included everything we went over in yesterdays tutorial above, but then I also added in the

// 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">
	<div id="voodoo-register">
		<?php
		$voodooredir = htmlspecialchars($_SERVER['REQUEST_URI']);
		$loginoutlink = wp_loginout($voodooredir, false);
		$items .= '<span>'. $loginoutlink .'</span>';
		if( ! is_user_logged_in() ) {
			echo $items . ' or <span><a href="' . home_url( '/' ) . 'register-voodoopress">Join VoodooPress.</a></span>';
		} else {
			echo $items;
		} ?>
	</div>
		<?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 }

 new login stuff. All of the login stuff is wrapped up in the voodoo-register ID. I further add some spans around the text that will become active links – login, logout, register. That way we can differentiate the text that will be up top quite easily. As a note, I’m not going to provide any fancy css today for that stuff. You can style it however you see fit to match your site – you can see I haven’t even gotten around to styling mine yet!

So here is the important consideration. I now have a div which contains a login/out and register feature, and I have a widget area. That’s 2 distinct features. You could add more things up in that top bar, it is pretty wide – especially if you’ve made your theme wider like we did in this tutorial. But if you just add things in there without planning, it’s going to look like crap. We need to plan our layout, and we need to account for responsiveness. How will your various items appear on a tablet? Or a phone? We need to allow flexibility, or maybe even hide things at various screen widths.

Right now, my CSS is pretty simple!

#voodoo-register {
	float: right;
	width: 300px;
}
@media screen and (min-width: 800px) {
	.ad-widget-area {
		width: 730px;
	}
}

The reason it is so simple, is that we are already using the default widget styles from the parent 2012 theme. SO most of the stuff is taken care of. But I had to account for one thing. In 2012, widgets are designed to take the full width of the parent container. So if we leave it like that, at full width, our widget area takes the full width and the login box may hide behind the ad, or it’ll stack, depending on your widget content. Google Ads are a bit fussy to work with.

I’m no CSS expert, so I just do a bit of guesswork a lot of the time, and figure out what works for me. To properly float objects, we need to give them a width. I set my login box to be 300px all the time, that is narrower than any modern phone, so it should behave just fine. I also float it right. On full width, I want it to be on the right – on narrower screens, that float will help it stack above the ad widget.

Then I assign a width to the widget area, but only above 800 px. When the screen gets good and wide, we set that width to allow the ad area and the login area to be side by side. When the screen gets too small (below 800px), the assigned width of 730px no longer applies, and the widget area becomes 100% again. This allows the two side by side items to stack nicely on smaller screens.

This tutorial was just meant as an example, it was by no means completely thorough. My main goal was to ensure you considered the responsive structure when adding things to 2012. If you can reuse as much of the existing structure and CSS as possible, this will be easy. The challenge comes with adding custom boxes (especially with fixed width items like Google Ads), multiple items, etc. And as a bonus, a nifty login option! Tomorrow, I’ll show you how I built up my Google Adsense box, it’s as responsive as I think is possible with the way Google currently behaves!

Leave a Reply