How to Create a TwentyTen or TwentyEleven Child Theme

It’s easy to create your own child theme. Even with little css knowledge you can make simple changes to your site to make a more personalized theme and I’ll show you how to get started and explain how it works.

First, I’ll assume you have WordPress and Twenty Ten theme installed. I’ll also recommend downloading NotePad++, it’s a free, easy to use editor.

Start off by creating a folder on your desktop, choose a name for your theme and rename the folder.

Twenty Ten theme acts as a framework, allowing you to create your own style and overwriting parts of the main style to add your changes.

Next open the folder and create a file called style.css and open it in your Notepad++ or whatever editor you want to use. You need to tell Twenty Ten theme to use this style sheet to display your theme, so at the top of this file add this bit of code.

/*
Theme Name: Theme Name
Theme URI: http://yoursite/yourtheme
Description: A child theme of 2010 default WordPress theme.
Author: You
Author url: http://yoursite.com/
Version: 1.0
Tags: black, blue, white, fixed-width, custom-header, theme-options
Template: twentyten
*/
@import url(‘../twentyten/style.css’); 

If you want to make a child theme for Twenty Eleven, just change the import call to

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

and change the temaplate call to twentyeleven

Template: twentyeleven

Next, change the Theme Name, Theme URI and description etc to reflect your theme, save that file and upload the folder to yoursite/wp-content/themes and login to your admin section  and activate your new theme.

You just created your own Twenty ten child theme! If you viewed your site, you’re probably thinking “hey, it didn’t work, it looks the same” as it should, we have to make our changes and style the theme how we want.

I won’t tell you how to design your own theme, I will show you how you can do it.

Styling your theme

There’s an unlimited amount of things you can do to change the look of your theme, add borders, change font and colors, background images, change the width of different areas etc.

This is how to add a border to the outside of the site. Twenty Ten uses the ID #wrapper for this, so if we want to add a 1px border to the #wrapper we would use this.

Open the style.css in your child theme folder and add -

#wrapper {border: 1px solid #000;}

Save your style.css and upload it to your theme folder on your server and view your site. You should see the border around the site. This is pretty basic and you’ll have to learn a bit of css to make drastic changes but there’s several examples and snippets on this site of examples of things you can change, just by adding the code to the CSS.

More advanced changes can be made by creating copies of Twenty Tens core files such as header.php and making changes to them. Whatever files you decide to edit will be used instead of the default ones. You can even create your own functions file and add custom functions to it. here is a post that contains an image which is a great visual reference tool to see where the most common areas are in Twenty Ten. Twenty ten CSS cheat sheet

You’re only limited to your imagination . I hope this was in some way helpful to you.

I’ve created a second post with a few examples of things you can add to your child theme css, with a download. Check out Twenty Ten child theme example

List of helpful sites on Child themes and WordPress

Aaron.jorb.in
Transformationpowertools.com
Digitalraindrops.net
Throwingabrick.com
Voodoopress.com
WpWeaver.info
WordPress Codex