A TwentyTen Child Theme KISS

Shoes and coloring book page

This is one time it's okay to be a kid again

WordPress 3.1 came out a couple of weeks ago and I’m hearing from quite a few bloggers just getting around to updating.  They discovered that when they updated all the changes they made to the TwentyTen theme had suddenly dis-appeared.  Yep, that’s the issue with making changes to the default theme.

Changes were made to TwentyTen with 3.0.5 and a major change made with 3.1.  (for example, the loop is now 3 loop files)

The quick and easy way to never have to redo all your modifications is to create a TwentyTen child theme.

Creating a TwentyTen Child Theme

Create a directory in your theme folder name it TwentyTen-Child,

in that folder put the CSS file from TwentyTen in the folder.

Modify the beginning of the file to include something like this:

/*

Theme Name: Twenty Ten Child
Theme URI: http: //www.yoursite.com
Description: Child theme for the Twenty Ten theme
Author: Dave Smith
Author URI: http: //www.customwpsitedesign.com
Template: twentyten
Version: 0.1.0

*/
@import url(“../twentyten/style.css”);

That’s really all you need to have a child theme. Now you can select it as a theme for your site.

If you have put your tracking code in the footer.php then move the footer.php file to the same directory.

Move any files you have modified to the TwentyTen-Child directory. (Exception: functions.php)

Activate your child theme.

Now you are ready for future updates to the TwentyTen parent theme.   (well, you are closer to ready)

Note:   This is not the purist approach

The purist would never do this.   That approach requires you to use the @import to bring in the Parent theme CSS then add your changes to your css file so they override the parent styles.   Granted this is the purist approach.   The issue.   You can’t edit an import CSS style sheet; you can only override it.   You don’t make changes to a single line or even a single number.   You can’t simply adjust a margin-top: 10px; to be margin-top: 7px;   You need the whole section.

#access {
background: #000;
margin: 5px auto;
width: 940px;
display:block;
float:left;
}

Okay, you don’t need the whole section, you could make it very complicated to track by simply doing this:

#access {
margin-top: 7px;
}

Now you have most of the code in the parent CSS file and the single line changes in the child CSS file.

It can get real complicated. to track down the code to find where the css statement really resides.

KISS the CSS

If you want to keep it simple move the whole file and add the @import from the parent.

Why do both? because you have a duplicate now, but when the parent theme get’s an upgrade there will probably be additions in the parent styles.css file. You want those additions to work in your child theme without having to go find them at a later date.

The Functions.php file

The Functions.php file is a whole different animal.  I’ve already written a couple of posts on header images and widget areas which are addressed in the functions.php file.


Did you blow away your changes to TwentyTen?
Have you created a TwentyTen child theme?
Any suggestions on TwentyTen child themes?

Comments

  1. Thanks for passing this along. It seems as thought by keeping it simple we are actually able to make some huge strides!