Twenty Thirteen Theme Review

If you’d like to see how Twenty Thirteen can be customized, please check Holi – our multi color Twenty Thirteen child theme.

With almost 1.5 million downloads in less than a week Twenty Thirteen theme surely broke all sort of records. But what is it all about and how is it different than its predecessors? Let’s find out.

Colorful design and Header Images

First thing you’ll notice in Twenty Thirteen theme are the colors. Nothing against Twenty Twelve, but moving from it to Twenty Thirteen feels like moving from an Eastern Bloc town to Rio. Last year’s default theme was bland and meant to let your content do the talking, this one jumps at you with a vibrant color scheme and matching header images, but makes sure your content looks great, too.

Twenty Twelve vs. Twenty Thirteen

Twenty Twelve vs. Twenty Thirteen

There’s also three header images for you to choose from, or you can upload your own using native header image functionality (Appearance > Header Image or Customize > Header Image). Ideal size of uploaded images is 1600 x 230 pixels.

Back to Blog and Post Formats

Twenty Twelve attempted to be more of a CMS theme. Not sure if that was a success, but Twenty Thirteen “takes us back to blog”, with beautiful typography, font icons and lots of attention given to post formats, each one being displayed in a unique way.

Two Widget Areas

Widget areas in Twenty Thirteen theme might be a bit confusing at first. The one called “Main Widget Area” is actually located in footer, while Secondary Widget Area is the one that appears next to posts. If you leave it empty, your site will be displayed using centered single column layout, so don’t worry, there is a sidebar, it’s just not there until you add something to it, which kind of makes sense, right?

Masonry Display of Footer Widgets

Three years after its launch, I still don’t get Pinterest craze. One thing I do get is how its layout influenced web design trends. In Twenty Thirteen theme, Masonry script is used to arrange footer widgets in the same way Pinterest pins are displayed. I’m not a fan of this, in order to make proper use of Masonry, you need to have at least ten widgets, which is not likely to happen in most websites. If you’d like to disable Masonry and display widgets in a flexible grid, check out that tutorial.

Footer widget area in Twenty Thirteen theme

Footer widget area in Twenty Thirteen theme

Google Fonts

Typography is one thing I really love about Twenty Thirteen. With all the spacing, perhaps body font could be a bit larger, maybe 18 pixels instead of 16, but that’s easily adjustable. Source Sans Pro and Bitter are used, replacing last year’s Open Sans. If your website is in a language Source Sans Pro and Bitter don’t have support for you can disable them by translating the theme, you just need to translate ‘on’ to ‘off’ and Google Fonts are out.

Genericons Icon Font

Genericons, a free, GPL licensed icon font is used throughout the theme, so yes, it is “retina ready”.

Genericons - icon font used in Twenty Thirteen

Genericons – icon font used in Twenty Thirteen

Single Column Layout and Content Width

As I mentioned, the theme comes with single column layout active by default, until you add some widgets to Secondary Widget Area. Content area width in Twenty Thirteen theme is 604 pixels in standard templates, 724 pixels in attachment templates and 484 pixels in audio posts.

One Menu Location

There’s only one menu location, at first that seems insufficient, but if you remember the fact that it’s possible to add menus to widget areas using Custom Menu widget you might realize that one + flexibility is just fine.

Custom Native Gallery Style

Native Galleries CSS generated by WordPress wasn’t good enough for Twenty Thirteen so it’s disabled (using ‘use_default_gallery_style’ filter). Galleries are tighter, with less space space between images and captions shown over the images on mouseover. Oh, the embedded CSS is gone as well.

Custom native galleries styling in Twenty Thirteen theme

Custom native galleries styling in Twenty Thirteen theme

Editor Style

Ability to see how your posts will look while you edit them is nothing new, it was first added in WordPress 3.0, but they did take it a step further in Twenty Thirteen. You know how each post format has a unique background? Well, it’s like that in the editor as well and looks really nice. Great attention to detail.

Editor style for quote post type

Editor style for quote post type

Other Notes

Not as important as the ones already mentioned, but good to know:

  • The theme requires at least WordPress 3.6, it won’t activate if you have an older version
  • It is, of course, translatable
  • If you’re not into oranges, there’a nine more colors to choose from, all you need to do is download Twenty Thirteen child theme Holi.

Do you use Twenty Thirteen on any of your websites? What do you think so far?

Slobodan Manic
I love working with WordPress and doing it the right way. Themes and plugins I develop have a common #1 goal: Keeping it as simple as possible for users to publish their content.
Slobodan Manic
RT @dimensionmedia: Some commercial WordPress themes if they were a beer. https://t.co/up2E1t6i1w - 1 week ago
Slobodan Manic
Slobodan Manic
Slobodan Manic

Latest posts by Slobodan Manic (see all)

18 thoughts on “Twenty Thirteen Theme Review

  1. I really liked the theme and tested it out for one of the clients I work with. I was super disappointed that the header doesn’t resize for the iPad or smart phones. What an enormous oversight. I read in a forum on the WordPress.org site that others were equally as frustrated. There were some hacks provided which might fix the problem but, frankly, we shouldn’t have to do that. It’s supposed to be responsive. http://wordpress.org/support/topic/header-image-isnt-responsive

    1. It depends in what widget area you put your widgets. You’ve got two widget areas with Twenty Thirteen, so please read the description once you click on them in Appearance > Widgets > 1. Main Widget Area or 2. Secondary Widget Area

      1. I am having the same issue with the secondary widgets (sidebar)…It drops into the other areas (comments, and even footer) but the background color disappears. Frustrating. Also, the static front page also displays the sidebar which is annoying. I just want clean static pages and posts to appear as posts. Anyone here know how to accomplish that?
        Thank you!

  2. I tried to change the main navigation text color from black to white. But I could not change it.
    I changed the css file several ways but no luck. How can I change the text color of main menu. Thank you in advance !!

  3. Hello,
    I have a question. I’m trying to change background for image but i don’t understand how to do it and if it is possible?
    if the icones of menu i can change for the images also so i can clik to images not to simple worlds?
    I’m sorry to asking probably simple questions, i’m beginner at the electonics.
    Thank u and good day:)

Leave a Reply

Your email address will not be published. Required fields are marked *