New WordPress default theme Twenty Thirteen, let’s take a look

screenie_twentythirteenNow that Twenty Thirteen is officially released and is now the default theme for WordPress, I thought it was high time I took a look under the hood.

Before I dig in to the code I must be honest and say I’m not very fond of the default design of Twenty Thirteen. I like the general colour scheme but I think the background image on the header is quite ugly!

I’m sure the theme will look great on a mobile device, but on a desktop monitor everything looks a little on the large side – very large fonts (which are great as long as they’re not overused), a large header area with lots of wasted space and large empty areas to the left and right of the main content column in the center (perhaps sidebars can be added in the theme options? Haven’t checked that out yet).

Presumably the header background image can be customised by the site
admin which is an incredibly useful feature for the everyday WordPress user, but still I feel the area has been made far too large (I thought big headers were ‘so 5 years ago’).

screenie_twentythirteen_FONT

I do like the fonts used in Twenty Thirteen. It makes a change for a default theme to use a serif font for entry titles and a sans-serif font for the main body of text. It really helps the titles to stand out and is something you usually see a lot on professionally designed custom themes.

I like the idea of using a different background colour for posts of different formats – BUT – pretty much every site I’ve made/worked on so far, barring one, hasn’t used the post format feature, so this may be wasted on many sites. Maybe it would have been better to have background colours alternate on a per-post basis so that a long list of regular posts would still be able to make use of the effect.

Of course, design is subjective – so whilst there are things I do and don’t like about Twenty Thirteen, I can understand that many people will think it looks lovely, and that’s all good.

So we shall move on to the ‘under the hood’ portion of this Twenty Thirteen review:

Twenty Thirteen CSS and HTML

First impressions on the CSS of the theme are – “WOW, this is much cleaner than Twenty Twelve!” There’s less clutter and the code is laid out in such a tidy manner.

REM sizes are gone in Twenty Thirteen, yay!

I’m glad ‘rem’ sizes aren’t used in Twenty Thirteen as they were in Twenty Twelve. That always seemed overkill to me, but perhaps they will make a come back at a later date when the web design world is more prepared for them.

I’m glad that the basic structure and selector (CSS ID’s and classes) names have remained pretty much the same, albeit with minor changes here and there.

Looking at the HTML source of my demo page I see that some areas of the footer have ‘hard coded’ CSS elements within in the code, like so:

		<footer id="colophon" class="site-footer" role="contentinfo">
				<div id="secondary" class="sidebar-container" role="complementary">
		<div style="position: relative; height: 307px;" class="widget-area masonry">
			<aside style="position: absolute; top: 0px; left: 20px;" id="pages-2" class="widget widget_pages masonry-brick"><h3 class="widget-title">Pages</h3>		<ul>
			<li class="page_item page-item-495"><a href="http://www.pinkishhue.com/wpdemo/a-parent-page/">A parent page</a>

This is very unusual and as far as I knew – frowned upon. I’m not sure why this has been done. I can’t imagine the theme would contain errors so blatant, as they are tested by a lot of people before being officially released, so I wonder if the CSS is somehow dynamically generated, perhaps based on the users browser size? I’m still trying to figure that one out.

Twenty Thirteen colours

The colour scheme for Twenty Thirteen is warm and well put together (although as already mentioned I’m not very keen on the coloured circles header image).

One of the first things I do when playing around with the CSS for a child theme is edit the colours used for links. This was very easy in Twenty Twelve with most link colours easily change-able by just editing the single colour setting for anchors (the ‘a’ element) in the CSS. But I notice Twenty Thirteen has used quite a few different HEX colour codes for links, and 3 or 4 of them are very close variations of the same dark red, meaning the difference will probably not very noticeable so it would’ve been easier, and in my opinion less confusing to the end user, to use just the one dark red colour.

But this is a small complaint. Not even a complaint really, more of a comment :)

Twenty Thirteen Theme Options

Although I could understand the zen-like simplicity of NOT having a theme options page for Twenty Twelve, I’m glad to see this is back in Twenty Thirteen. I’m glad on behalf of all the non-web-designer WordPress users out there who’ve been crying out for ways to customise the look of their website without having to really deal with code, which is understandably not everyone’s cup of tea.

(And the options page will certainly come in handy when people want to change that butt-ugly header image! [/joke])

Twenty Thirteen conclusion – more study needed!

As this has been just a brief review and there’s a lot of features I haven’t even seen yet, I won’t give a full on conclusion here except to say that first impressions are good – it seems to be a friendly, uncomplicated theme.

More study will be required before I can officially (in my head) give it a placing in the ‘which is best’ list of the last 4 WordPress default themes.

Free Twenty Thirteen child themes will follow – the fruits of my study! Watch this space.

3 thoughts on “New WordPress default theme Twenty Thirteen, let’s take a look

  1. I did say I wondered if it was dynamically generated:

    “I wonder if the CSS is somehow dynamically generated, perhaps based on the users browser size?”

    But thank you for sharing the link, that is handy to know (although I don’t think I will need to use the old style, the new style will display better on mobiles etc.)

    Thanks for your comment Paweł :)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>