Twenty Ten is the new default theme for WordPress 3.0 and makes great use of all the new features this new major release brings so it seems to make sense to start with this as a base for your next WordPress based project’s theme yeah?

Well before you start jumping in and hacking the code you need to realise Twenty Ten is in fact a Parent Theme and you can make ALL your required CSS / Function and Template modifications in a subdirectory so when the main Twenty Theme is updated all those tweaks and hacks won’t be lost for ever – cool ay?

Of course WordPress do a great job of explaining how to start working with Child Themes using Twenty Ten as the base here but we thought we would summarise our take on this for those who need the bare minimum to get started: Got your favourite PHP / CSS editor ready? Great let’s begin…

How to set up your directory should be set up

The most important aspect of getting your new child theme working is making sure you have the required files in the correct place like this:

• web root
  • wp-content
    • themes (directory where all your themes are)
      • twentyten (directory where the Twenty Ten Theme is)
      • your-new-twentyten-child (directory of your new child theme – you can call this anything!)
        • style.css (the only 100% required file in a child theme which must be named style.css)
        • functions.php – this is optional but is the place to add new functions to your theme. It is loaded in addition to the parent’s functions.php and right before the parent’s file.
        • header.php, index.php etc – Again you don’t need these but the best thing to do is make a copy of the original Twenty Ten Theme files you want to modify and store them here. Then edit these copies to remove things that you cannot do via the nice new options within the WordPress Admin area and be safe in the knowledge you can always just delete your copies to get back to the Twenty Ten Originals

What needs to be in the child style.css file as a bare minimum

The following is the standard

/*
Theme Name:     My Twenty Ten Child
Theme URI:      http: //thebloghouse.com
Description:    My child theme for the Twenty Ten theme
Author:                Andy
Author URI:     http: //thebloghouse.com
Template:       twentyten
Version:        0.1.0
*/

@import url("../twentyten/style.css");

/* The following CSS is our example - you do not need to change your site's title link colour */

#site-title a {
    color: #009900;
}

Seems easy enough yeah?

Only thing you need to watch out for is if you want to say change the way Twenty Ten deals with certain CSS values you need to make sure you copy the full original CSS into your style CSS and change each value. By this we mean say you want to change the nice new Twenty Ten footer. You would find the following in the original style.css and copy this to your style.css file:

#colophon {
 border-top: 2pt solid #000;
 }

However simply removing the border-top: 2pt solid #000; part will NOT remove the border – you would need to have the following none value to override the original style.css:

#colophon {
 border-top: none;
 }

Obviously this is a very quick and simplistic look at the great work that everyone who has worked on and contributed to WordPress 3.0 and the Twenty Ten theme but if you are struggling with the basics hopefully the info above might help.

If not I would suggest reading the documentation again here, check out the 1 hour + video below by Steve Bruner and his WordPress 3.0 Customization Techniques or feel free to post a question in the comments below.