Don’t Mess with the Parent – Make a Child Theme

WordPress

I discovered something was wrong with my modified Twenty Ten WordPress theme this morning. Some of the modifications I made had disappeared. I then remembered that I had updated the version of WordPress the night before, which likely erased my modifications. Lesson learned: Don’t mess with the original parent theme – make a child theme instead.

What I did today was download the Twenty Ten Five theme, a replica of the original Twenty Ten theme that uses HTML5 markup. Then I made a simple Child theme with some modifications to the header and CSS. The minimum you need to do is make a new folder with a style.css file that has something like this at the top:

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

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

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

The Template refers to the original parent theme you wish to refer to, in this case it’s twentyten. The @import url(“../twentyten/style.css”) pulls the parent theme’s CSS. You’ll either need to import the parent’s CSS this way or copy and paste into your Child Theme’s style.css. Oddly enough, the child theme will automatically use the parent’s PHP structure for rendering pages but not the parent’s CSS.

Anyway, child themes are an easy way of modifying an existing theme without breaking it or having to go through the trouble of creating a WordPress theme from scratch (both of which I’ve done).