Codeable info

My First Impressions of the Twenty Ten Theme

Posted on by in Blog

This week I started work on a small made-for-adsense mini site I am developing. I was tempted to take the quick and easy way forward by using by using the Headway theme for the design. However I decided to use the new default WordPress theme Twenty Ten instead.

First Impressions of the Twenty Ten Theme

It’s around two months since the first beta release of WordPress 3.0 was released. In that time I got to know the new features such as the background, header and menu options, but you really don’t get to know a theme well until you have to customise it. Which is what I have being doing over the last few days. In this post I will be giving you my first impressions of our new default theme :)

Header Images

At first I thought that the header and featured image options was simply a handy little extra in WP 3.0 though I am really loving this new feature. The ability to quickly and easily change the header image in any post or page is very useful.

I’m sure you will see a lot of bloggers take advantage of this (Plus it will be interesting to how theme developers incorporate this new feature in different ways over the next year).


The theme comes with two widget areas in the sidebar and four in the footer. This makes it very easy to customise your sidebar and footer without touching any code. To add more widget areas you simply need to add more widget zones to the functions.php template.

It’s a good setup for those who aren’t too comfortable with editing HTML and PHP code.

Twenty Ten WordPress Theme

Quality of Code

A lot of things work very differently in WP 3.0+. Thankfully the Twenty Ten theme is very well commented in both the php files and the CSS stylesheet.

The CSS structure of the theme is a little different to what I am used to though. For example, the container class uses a width of 100% instead of a fixed width. It then determines the size of the main content area using a negative fixed width (e.g. margin: 0 -240px 0 0;). I have seen this before in stylesheets though previously most WordPress themes would use positive values.

I did manage to change Twenty Ten from a 2 column theme to a 3 column theme quite easily though I want to spend some more time with the stylesheet before doing any major customisations.

Child Themes

For my new site I created a child theme of Twenty Ten. One of the first things which is apparent when doing this is that Twenty Ten was designed with child themes in mind. There are lots of tips, comments and advice in the templates telling you what to do if you are using a child theme.

For example, the index.php file is a lot smaller than it used to be. The main part of the page (i.e. the loop) has been transferred to a template called loop.php. If you are using a child theme and want to make some edits to the loop you simply need to upload a template called loop-index.php and edit that (which is used instead of loop.php as it higher in the hierarchy).

I suspect we are going to see a lot of skins and custom child themes of Twenty Ten since it was clearly designed with child themes in mind.

Your Thoughts

I’m still getting to grips with Twenty Ten however my first impressions of it are very positive. A lot of functions and code is different from previous versions of WordPress but you will soon find your feet as all templates are very well commented.

I’d love to hear your thoughts on Twenty Ten, particularly from those who are using the theme or have tried it out.


Codeable info

Comments (15)

Comment by goesmoeh says:

I need your help. How to customize the twenty ten theme from 2 column a look to be 3 column a look. What’s the code and where to put it? Thanks. You can email me for your helping.

Comment by Kevin Muldoon says:

I haven’t noticed that myself. I’ve messed about with 2010 a few times but haven’t modified the sidebar much.

Comment by Kevin Muldoon says:

Yeah it’s a fantastic base for creating your own themes as it’s very easy to modify. Would love to see what you’ve done with it.

Comment by Warren says:

Good stuff.
I like 2010 as well but one thing I don’t get is why the main container includes a huge negative margin to accomdate the sidebar instead of just nesting the sidebar within it.
This creates an issue where I’m trying to place a single pixel border around the container but the right border is not really at the edge of the content area so there is no border drawn.
Any ideas or suggestions?

Comment by Tom Durkin says:

I’m finding twenty ten a pretty nice basis for creating my own custom themes. I’ve not done anything amazingly creative yet, but the current project I’m working on has been easy to create using this theme as a basis for its design.

Comment by Kevin Muldoon says:

Hi Emilio,

The changes you are referring to are HTML/CSS customisation rather than WordPress itself.

If you post the code in the forums I’ll do my best to have a look at it and help you out with it.


Comment by Kevin Muldoon says:

Hi Greg,

Yeah I think we’re gonna see a lot of great child themes for twenty ten over the next few months :)


Comment by Greg Freeman says:

I really like the new Twenty Ten theme, it’s much easier to customize then the old default theme. It was definitely made with child themes in mind.

Comment by Rudi Lehnert says:

I just created 64 nice headers for the Twenty Ten Theme:

You can download them for free. Enjoy it!

Comment by WordPress 3 “Thelonious” Released says:

[…] sure you check out the new Twenty Ten Theme […]

Comment by The Home Page Slug Problem Has Been Addressed in WordPress 3.0 says:

[…] week I spent a lot of time getting to know WordPress 3.0 and the new default theme Twenty Ten. Whilst working with WP 3.0 I noticed that a small problem which used to exist in WordPress has […]

Comment by Kevin Muldoon says:

I wasn’t aware of that either. Guess most people didn’t take advantage of it.

Great site you have there. You’ve released some great themes recently (I included some in Codeable info