Introduction to the New Twenty Twelve Theme

Introduction to the New Twenty Twelve Theme

Since 2010 WordPress has been launching a new theme with each of their yearly releases. With version 3.5 coming by end of the year, we can now download the all new Twenty Twelve theme, a successor to Twenty Eleven. Before I talk about what’s new in Twenty Twelve, I will be discussing the difference between Twenty Eleven and Twenty Twelve, and how the change will benefit working with the default theme of WordPress.

Major Difference between Twenty Eleven & Twenty Twelve

Major Difference Between Twenty Eleven & Twenty Twelve

  • Header images are not activated by default anymore. In fact the theme has no default header images to choose from. When you activate Twenty Twelve, the header section is not shown.
  • Sidebar is not visible if no widgets are set.
  • New theme does not have a single image.
  • Showcase template of Twenty Eleven is no longer present, instead we now have a static home page template with 2 widget areas.
  • No theme optionsm utilizes the new Theme Customizer instead.

Twenty Twelve will be shipped with each installation of WordPress 3.5. Being the default theme it could be used by a large number of WordPress powered websites and would also serve as the theme many new WordPress developers would study before they create their own themes. With so much responsibility, it becomes essential that the theme follows WordPress standards, is made easy to use for a beginner and sets a benchmark for theme development. With WordPress widely being used as a CMS and not just a blogging application, the new theme seems to deliver on all aspects.

Created by Drew Strojny and many others, here are some of the highlights of Twenty Twelve:


1. Front Page Template

Twenty Twelve - Front Page Template

In case you wish to setup a static home page, Twenty Twelve comes with a special template for the home page. Geared towards those who are using WordPress as a CMS, this template comes in handy to setup a welcome page with an introductory message. Along with the two home page only widget areas that can be arranged in one or two columns below the main content, this gives website owners more ways to organize content.


2. Minimalist Design

Twenty Twelve is sleek and uses absolutely no images in its layout. In fact the theme does not come with even one single image. Styling remains to a minimum which is good if you use it as a parent or starter theme. This also means less overriding in the CSS of child themes.

Headers are not set by default. The feature remains for those who wish to use it; however the header is not displayed when the theme is first activated like the previous Twenty Eleven theme. If you set a header it’s displayed below the menu.

Unlike Twenty Eleven, if you have no widgets set in the default sidebar, the sidebar is completely hidden.


3. Responsive With Mobile First Approach

Responsive with mobile first approach

The theme uses a mobile first approach and it’s crafted to work perfectly across all major devices including retina displays. This is the first default theme from WordPress which is fully responsive. The theme displays content elegantly across multiple platforms.


4. Typography

One of the best aspects of this theme other than its responsiveness is the typography. There is a nice amount of spacing between elements making it easier on the eyes to go through the content. Twenty Twelve is also the first default theme to use a web font via Google’s Web Fonts Directory. The theme uses Open Sans typefaces making the text appear attractive and yet readable. Since WordPress is used in many different languages, the theme comes with a function to detect the user language and switches to a more suitable font if Open Sans does not support the users language.


5. Post Formats

Five post formats (Aside, Image, Link, Quote and Status) are enabled by default along with the general standard format option. Each post format has been given a custom styling which is consistent across the individual blog post page as well as on the blog index page.

Twenty Twelve Post Format

The team responsible for this theme seem to have done brilliantly and taken this default yearly theme tradition of WordPress in the right direction. The theme follows the best practices of WordPress and follows new standards of being responsive and content oriented without being bloated. Twenty Twelve comes with no images and the style.css is also smaller compared to the last default theme.

As theme designers have started using a variety of WordPress frameworks for developing their projects and themes, Twenty Twelve can definitely be used as the base to build your next WordPress project or you may also create child themes for it to enhance and customize the look and deliver a responsive site design faster.

Feel free to share your feedback and comments about this theme below.

Harish Chouhan is hchouhan on Themeforest
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Sam

    I like it. I think they took a big step in the right direction to increase the popularity of wordpress even more by designing for mobile first and keeping the design as simple as possible. Will definitely use a starter theme for creating other sites.

  • http://www.iphoneappslibrary.com Louis

    Where can we download the new theme?

    • http://wp.envato.com/ Japh Thomson
      Staff

      Hi Louis, I’ve updated the post, there’s now a download button at the top linking you to the Twenty Twelve page in the theme directory.

  • Al

    I notice that the demo at twenty twelve demo now shows the home page in IE8 as it does in Chrome or Firefox.

    the fact that twentytwelve does not work with IE8 (as currently deployed) is a major drawback to me in using this theme, although this is being changed. IE8 is just too large a browser in my web world to forget about or get around.

    if twentytwelve was just another wordpress theme, this would not be the major concern with this theme like it is.

    Al

    • http://www.dreamsmedia.in/ Harish Chouhan
      Author

      Hello AL, can you create a ticket about this on WordPress.org forum. I could then try to create a quick fix when i get time to make the theme work in IE 8.

      • al

        this has been a concern on the wordpress.org forums, looks like they are in the process of setting up the theme for IE8 so that it displays the page normally as done in CH or FF in place of the menu button

        updated twentytwelve

        I assume that this will be published as an update when ready, the theme demo has already been changed

        Al

  • Gemma W.

    I love Twenty Twelve’s minimalist design so much that I started using it on my blog at WordPress.com a little while ago. Looking forward to its release for self-hosted blogs.

    • http://www.dreamsmedia.in/ Harish Chouhan
      Author

      @Gemma. Its available in the repo http://wordpress.org/extend/themes/twentytwelve. Yes I like it too because of its simplicity. It gives us a solid foundation on top of which we can make something more customized for our needs.

      • http://www.codeconquest.com Charles @ CodeConquest.com

        I think that will be its main use – as a template on which to build something more substantial. On its own it’s a bit bland. I wonder if any self hosted blogs do use the theme, and how they’ve customized it.

    • Al

      it is now available at wordpress.org, uploaded Sept. 27th

      Al

      p.s. do you do anything with the IE8 menu and layout problem?

  • Keika

    Hey, great article, one tiny thing, you jump from header 4. to header 6….

    • http://wp.envato.com/ Japh Thomson
      Staff

      Whoops! Thanks for pointing that out, Keika. We removed one, and forgot to renumber. Fixed now though :)

  • http://www.facebook.com/al.mcrorie Al McRorie

    what happened to the other comments?? Al

    • http://wp.tutsplus.com/ Japh

      Hey Al! We’ve just enabled Disqus comments on Wptuts+, so all pre-existing comments are still in the process of being synchronised, and should be back shortly.

      • http://www.moviescut.com/ Atul Gupta

        Its a good move to disqus :)

        • http://wordpressation.com/ Elshereef

          Yeah, very good move.

          • http://www.wpkube.com/ Devesh

            Nice move, Japh. Looks much better now.

  • http://www.facebook.com/bob.alpakar Bob Alpakar

    Thats great to have disqus, encourage people to leave comments.

  • http://wpsites.net/ Brad Dalton

    Why don’t you grab an avatar dude?

  • Pingback: 新デフォルトテーマの Twenty Twelve の紹介 | WordPress ニュース WP NEWS

  • bernhard

    TwentyTwelwe is also compatible with wordpress stable 3.4.2

  • David Maxey

    Love it, gives the newcomers into WordPress who will be designing and developing their own themes/child-themes, a more approachable outlook when starting with a vanilla type theme such as Twenty Twelve.

  • Pingback: Pengenalan Kepada Tema WordPress Twenty Twelve | Fazreen

  • http://twitter.com/ashrafslamang Ashraf Slamang

    Have any special hooks been introduced into Twenty Twelve?

  • Pingback: Twenty Twelve — новая стандартная тема WordPress | Wordpresso

  • Pingback: Le thème «twentytwelve» intéressant et épuré | yvan daneault

  • Naomi Graphics

    I am trying to use columns (and used quiet a few plugin, but every time it breaks the site (not in all browsers, but most, I am left with just the footer

    infirebug, thisis what I get, but dont understand it

    ReferenceError: jQuery is not defined

    var screenheight=jQuery(window).height();/chile…oletas/ (line 51)

    TypeError: document.getElementById(“site-navigation”) is null

    …utton = document.getElementById( ‘site-navigation’ ).getElementsByTagName( ‘h3′ …

    • http://www.facebook.com/EdoSuzuki Eduardo Suzuki

      This theme doesn’t load jQuery automatically. You have to do it yourself in the functions.php. I like it…the theme is less JS dependable and more clean (:

  • Pingback: What’s New in WordPress 3.5 | Wordpress Webdesigner

  • Pingback: What’s New in WordPress 3.5 | Studios PK

  • Pingback: What’s New in WordPress 3.5 : GeniusChamps

  • Pingback: Introduction to the New Twenty Twelve Theme | Wptuts+ | mark matousek

  • Vivek Moyal

    I am using this theme in my blog. I want to know that does it effect the search ranking in google or not.

  • nisansabag

    it seems that by default the jquery library doesnt loaded in twenty twelve theme. i tried in chrom developer tool to call a function in jquery and it seems it doesnt reconize it.

    someone here know why its happening?

  • http://twitter.com/welshfella23 Christopher Davies

    one awful template, you can set a main page, add other pages, add posts and an image, that’s it. try installing a menu widget and you’ve had your chips. worst thing i did was install this.

  • Pingback: Link format post | oik2012 theme

  • http://www.sagenext.net/ alex

    Twenty Twelve is better than other

    Twenty series.

  • Harsh

    gud i like the theme i have implemented in my website……

  • http://www.gamecatchup.com/ Kevin Kinnersley

    I love this theme but at the moment what I can’t get my head around is the different post types (Aside, Image, Link, Quote and Status). What is the purpose of all those, i.e when would you need to use them? – Does anyone have a working example – I guess sometimes you need to see things in action to understand the purpose of them and so far this is the one part of Word Press I haven’t got my head around yet. I may have to read the documentation on it.

  • Rodge

    Hi Harish, nice write up. I think 3/5 is a fair review.

    I came across an interesting problem where the tag only works with posts and not pages…can you confirm this? It’s been driving me a little crazy!