Flogging the new WordPress Twenty Twelve Theme

I have not gotten a chance to follow the development of the Twenty Twelve theme, but now that it is released for self-hosted WordPress blogs (it has been available on WordPress.com for several weeks) it is high-time to catch-up on what will surely be the default theme that comes with the next release of WordPress, in December.

The super-minimalistic layout of Twenty Twelve in its default state is sure to appeal to many bloggers looking to highlight their words, instead of flashy graphics. Minimal is just the default, though. There are a number of tools in the admin dashboard that make it easy to customize Twenty Twelve – including uploading your own banner image and cropping it to size.

Some elements, like the location of the menu bar, will still require coding or code manipulation to customize, though. WordPress has made it very easy – maybe too easy – to edit individual theme files from the admin dashboard. I say “too easy” because, unfortunatley, there is no way to backup a file before editing it and potentially rendering your theme innoperable, if you make a mistake.

The theme editor (number 1 above) is located under the Appearance menu. A list of theme files appears on the right-side of the edit box, and header.php (number 2 above) contains the menu bar code (number 3 above) that can be moved in order to relocate the menu bar below the banner image.

	<header id="masthead" class="site-header" role="banner">
	...
	</header><!-- #masthead -->

	<nav id="site-navigation" class="main-navigation" role="navigation">
		<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
		<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
		<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
	</nav><!-- #site-navigation -->

The “masthead” (banner image) code is ommited above for clarity, but you can see that the entire block of “site-navigation” code (menu bar code) is simply moved from its original location above the “masthead”, to its new position immediately after the closing “masthead” div.

There are some really smart elements behind the scenes that will make blogging easier, too. Unlike the Twenty Ten and Twenty Eleven themes, there are no default sidebar widgets in Twenty Twelve. In fact, if you do not have any widgets selected there is no sidebar at all.

And, whether you use sidebar or not, the Twenty Twelve theme scales images to the appropriate width. The 1,280 pixel-wide image above scales to 960 piexels when no sidebar widgets are incorporated into the layout – and 625 pixels with a sidebar. This dynamic CSS scaling works all the way down to mobile devices too, so your blog looks great without having to mess around with mobile plugins.

The Twenty Twelve theme does not incorporate any special formatting for the quote post format, but any text enclosed in block quote tags gets a light gray background. This is irrespective of the post format, but the example shown here is on the same quote post.

The aside post format does get quite a makeover in the Twenty Twelve theme. For one thing, the post title is now included in the published post – something that is sure to make RSS feeds with aside posts look a lot better. They also standout more, with a light blue background and darker-blue sidebar.

I am looking forward to spending more time with the Twenty Twelve theme. From what I have seen so far, I think this will become the most popular default theme since Twenty Ten.