A First Look at the Twenty Twelve WordPress Theme

September 09, 2012 | Written by Ed Andrea

twenty twelve 2012 wp theme Starting in 2010, the WordPress team started to annually release a new, default theme for WordPress sites.

This year they are cutting close to their own deadline. The Twenty Twelve theme narrowly missed inclusion in WordPress 3.4 and so will become the default with the December release of WordPress 3.5.

However, Twenty Twelve has now been released for testers and will soon be released to the general public via the WordPress Theme Directory.

What Does Twenty Twelve Look Like? This:

twenty twelve

So What's Different in Twenty Twelve?

Twenty Twelve is the first default theme to be fully responsive to take advantage of all the new mobile devices.
To make WordPress act more like a CMS, there's a homepage template with content and introductory area at the top, then unique widgets underneath.
The theme is retina-ready for those of you rushing out to buy the latest Macbooks.
There won't be any pre-loaded or pre-selected header images.

Testing Twenty Twelve

At the moment, the easiest way to test Twenty Twelve is to download the 3.5 nightly builds and install a new WordPress site.

You can download the zip file from: http://wordpress.org/download/nightly/. With that zip file you can either use it to install a brand new WordPress site or you can extract and upload /wp-content/themes/twentytwelve/ to an existing WordPress site.

The Homepage

The homepage template has no sidebar. but does have it's own widgets in the area below the content section. You set up a static front page using the normal procedures for creating a static front page. (Go to Settings > Reading on the dashboard). There are also no comments on the homepage.

How Pages Appear in Twenty Twelve

Posts in Twenty Twelve

Styling for post formats remains consistent on both list and single post views. Links, quotes, asides, and images that you enter into your posts will appear in the same way across your site.

How Links Appears in Posts in Twenty Twelve

How Asides Appear in Posts in Twenty Twelve

How Quotes Appear in Posts in Twenty Twelve

Posts and Pages with No Sidebar in Twenty Twelve

There is also Full-width-no-sidebar template that is a great option:

Theme Options in Twenty Twelve

Clicking Appearance > Customize or Customize from the dropdown menu gives you instant access to Twenty Twelve theme options. From here you can quickly customize the site and get an instant preview on the right hand frame.

Custom Header Images in Twenty Twelve

We've mentioned that there are no default header images included with this template. You can upload your own. A big difference here is that the size is flexible. There is a cropping feature for you to modify the image after upload if you have an especially large picture and you only want to use a portion of it.

Comments

#1 Chad Warner 2012-09-06 17:25

I can't wait to start using Twenty Twelve as a parent theme. When I build client sites, I make child themes of Twenty Eleven. Twenty Twelve looks like a major improvement.

I especially like the introductory area on the homepage, which will work well for business sites. At first glance, I don't like the links being so much larger than regular text; I'll probably change them to be the same size.

#2 green 2012-09-10 06:11

You can already download it... I've had it for a few weeks now...

#3 lacwebsite 2012-09-21 02:13

Know how to fix menu/navigation for IE to display properly like chrome, firefox, safari instead of menu buttons

#4 Telmo Lopes 2012-10-17 12:45

I'm trying out this new theme, and i've tried a few plugin sliders for the welcome page. But the drop down that appears with mouse rollover from the main menu line, falls behind the slide images on any slider plugin i've tried. How can I send the slide backwards and the drop down menu to the front?

I appreciate any good answer you can have!
sincerely,

#5 Bud Kraus 2012-12-14 23:20

Thanks for some good info to help people get started with 2012. Going to tweet this out.

#6 chrisdavies23 2013-01-19 15:58

responsive? yeah right, looks dreadful on my windows phone. and try to install a menu widget on the main page ha, what a joke

#7 CarolineA 2013-02-02 16:49

Well, I don't want the Full-width-no-s idebar template. I want my sidebar to be visible next to all blogposts. How do I change it?

Quick answers are very much appreciate!!

Add comment

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Latest Blog Posts and Tutorials

Blog Categories

Latest Comments

A Guided Tour of WordPress's wp-config.php File
Comment by Rick
So what to do about moving the file if you're hosting multiple domains on one server...all ...
Content Versioning - A Sneak Peek at Joomla's Newest Proposed Feature
Comment by vickiwatson
Oh, wow! I've been waiting for this for years. This will make Joomla practically ...
Content Versioning - A Sneak Peek at Joomla's Newest Proposed Feature
Comment by andy567
Looks very nice :) Can we get it to autosave though? Like wordpress does?
Content Versioning - A Sneak Peek at Joomla's Newest Proposed Feature
Comment by steve
Thanks Dave, Andrew, Jon. It's great to hear there's a lot of enthusiasm for this ...
Content Versioning - A Sneak Peek at Joomla's Newest Proposed Feature
Comment by Jon Lackey
Very nice! Features like this will really set Joomla apart in the eyes of "enterprise" ...

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

You can re-use these tutorials.
You can modify these tutorials.
You must link back to our original tutorial.
You can't use these tutorials commercially.

Click here to read the full license.

WordPress Tutorials and Blog Posts