How to Make a WordPress Child Theme with Twenty Ten

The new wordpress 3.0 theme Twenty Ten is now the default theme on all new wordpress blogs. If you want to customize the theme templates or CSS you should use a wordpress child theme instead of directly editing and hacking in your changes. This will ensure that your changes are kept even when wordpress is updated.

To make a child theme, simply make a new directory in the wp-content/themes directory, you can call it whatever you wish.

A child theme only requires a style.css file; create this file and put this code inside:

/*
Theme Name: Your Theme Name
Description: Child theme for the Twenty Ten theme
Author: Your Name
Template: twentyten
*/

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

You must have the @import rule before any custom css or it will not work correctly. You can now customize or add any CSS rule.

If you want to modify Twenty Ten’s templates, simply make a copy of a template and paste it in your new child theme directory. WordPress will now use this new template file instead of the default template.

You can also create a custom functions.php file in the child theme directory. Unlike the CSS or template files, it will not overwrite the parent functions.php, it will be included in addition to it.

Using these simple steps I was able to change a few simple CSS rules and add blue to the Twenty Ten blog theme.

/*
Theme Name: Keleko
Description: Child theme for the Twenty Ten theme
Author: Greg Freeman
Template: twentyten
*/

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

#branding img {
	border-top-color: #1b80c3;
}

#access {
	background: #003f69;
}

#access li:hover > a {
	background: #0b5e96;
}

You can also use these methods to make substantial changes changes to the Twenty Ten theme. Use Twenty Ten’s style.css file or the FireBug FireFox extension as a reference to find out what CSS rules you can modify.

Don’t forget to activate your new wordpress theme in the admin control panel.