Creating Twenty Ten Child themes

I know I’ve posted about this before, but I thought I’d make a slightly better post.

The default theme that comes with WordPress is called Twenty Ten. 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 and have ftp access. I’ll also recommend downloading NotePad++, it’s a free, easy to use editor.

Start off my creating a folder on your desktop rename it and choose a name for your theme, in this example I’ll call my theme “Blue”.

Twenty Ten theme acts as a framework, allowing you to create your own style and overwriting 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. We need to tell Twenty Ten theme to use this style sheet to display our “Blue” 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’);
 

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, I’ll also give some examples of things you can do.

Styling your theme-

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

Since I want my theme to look a bit different than the regular Twenty Ten, the first thing I’ll show you how to do is add a border to the outside of my site. Twenty Ten uses the ID #wrapper for this, so we want to add a 1px border to the #wrapper.

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

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

Next we’ll change the color of the post titles to blue. Twenty Ten uses the class .entry-title a:active for this. We can also change the hover color of the post titles by using  .entry-title a:hover.

Add this to your style.css –

.entry-title a:active {color: blue;}
.entry-title a:hover {color: red;}

You can change the colors to whatever you want, even change the font-size, or weight, add an underline or border and so on.

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 and your post title color change. This is pretty basic and you’ll have to learn a bit of css to make drastic changes but I’ve got several examples and snippets on my site of examples of things you can change just by adding the code to the css and you’ll be adding your own ideas to your theme in no time.

I hope this was in some way helpful to you, I’ll be adding another tutorial soon and show you even more things that can be done.

Read part 2 of Creating Twenty Ten Child Themes




34 thoughts on “Creating Twenty Ten Child themes

  1. Hi Nik, I looked at the theme you linked, it's a shame he didn't create it as a child theme. He did record what he edited to create the different sidebar and left it in a .doc file in the theme. The problem is, he removed twentyten functions, instead of creating new functions. So, unless you know how to re-create these functions and use it in a child theme, I can't help you with it.

    If you look at my theme, TwentyTen Options, http://zeaks.org/2010-child-themes/twentyten-opti… it has several different layouts, and it's a child theme, it can be used the same as the child theme you are using now, you could even add your own css to it like you have already done. It doesn't have the 2 small sidebars, it does have 2 left sidebars and 2 right sidebars though. It's also what this site uses.

  2. ok for your quick post…
    i already explore 2010 option Theme1.5 before.it nice.i will try it.
    but i like to make/study how to make my own child theme..but your 2010 option Theme1.5 is the best
    tq or your comment

  3. It's a good idea to start your own, you'll learn alot by doing it. It's not hard to make different sidebar layouts, I have examples on this site how to do it. http://zeaks.org/twenty-ten-tips/creating-twenty-

    If you take a look at the different layouts in my theme, they are a good example as well, use them in your own if you like.

    The functions file is also heavily commented, you can pick and choose pieces of code from it for your own too if you want. I listed all the sites I learned from in my post, they are very helpful.

  4. Not sure if you mean php version 3.1.2 or WordPress 3.1.2. It works fine with WordPress 3.1.2 i'm running it on this site and the test site, if that's your php version, you need to upgrade.

  5. How can I have single.php and header.php in my child theme? Currently, I've duplicated both the files into the child theme, since it broke some customizations I did in parent theme!

    • You should never customize the parent theme. If you want to make changes to the header, then copy header.php to your child theme and edit that instead. Same goes for any files, except style.css.

  6. Hi There,
    I have been learning a ton about CSS and your info is invaluable. Thanks! I am trying to get all my page titles to look the same here; http://www.airxpanders.com/. I’m editing in dreamweaver and then uploading the CSS. I’ve taken over this site for a client who was left hanging by another “designer”. As far as I can tell he made a child CSS called style1.css, which is what I am editing, and it’s very messy in there. At one point, the home page title was correct and the rest were not. As soon as I figured out how to fix the rest, the home page reverted to the incorrect style.
    Would you mind seeing if there is anything noticeably wrong?
    Thanks for the time!
    CasaRosada recently posted..Hello world!My Profile

Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap code in [code] Your Code Here [/code] tags.

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>

CommentLuv badge