I was interested in using the advanced features of Twenty-Ten, particularly the custom backgrounds, but also wanted something better looking without having to create my own from scratch. Luckily there was a another new feature released for just that purpose.

Child Themes

In WordPress, even themes have different versions, the default has been updated multiple times since it’s release. A child theme let’s you override just the parts of a theme that you want to change without having to change the actual theme files. When an update is released, rather than having to make your changes again, your child theme is untouched, leaving your changes to cover the new files instead.

A child theme only needs two things: it’s own folder and css file. The css file contains the same header information as regular themes with one important addition.

/*
Theme Name: Twenty Ten Child
Theme URI: http: //example.com/
Description: Child theme for the Twenty Ten theme
Author: Your name here
Author URI: http: //example.com/about/
Template: twentyten
Version: 0.1.0
*/

The template line refers to the folder of the parent theme, telling WordPress to use it for the files that aren’t defined in the child theme. The parent’s css file is not loaded by default so if you just want to override a few things instead of writing an entire file, you’ll need to import the parent’s css file into the child’s then overwrite anything you don’t like.

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

This is where the finicky part comes in, dissecting someone else’s stylesheet and html to find the exact selectors and definitions you need to override. No matter how thoroughly documented something is, the sheer fact it’s not set out the way you would have done it makes it harder to figure out.

I tried to use the same headings and arrangement, only overriding what I wanted to change. I made the effort to make as few changes as possible to achieve the results I wanted. Hopefully this will make it easier to update Trans Twenty Ten to keep up with the parent theme Twenty Ten as it evolves.

Twenty Ten has a lot of powerful features but I didn’t care for the look. I’ve added custom fonts (Tinos and Tex Gyre Heros and made the content background translucent so more of the custom background shows through along with some CSS3 goodies like shadows and rounded corners. It’s just enough to give Twenty Ten some polish and make the customizations more prominent. It works in Firefox, Safari, Chrome and IE9. It looks fine in IE8, just no rounded corners or transparency.

I liked the results so I’m releasing it for public use.

To get the look of the screenshot, install and activate the theme, delete the header image under the preferences, set your background, top menu and widgets on the right.
TransTwentyTen

A recommendation

My one problem with the custom backgrounds is when you use a new one, the old one gets deleted. I like to keep a selection and switch between them regularly. “Custom Background From Media Library” is a plugin that lets you use images from your media library as backgrounds.

One of the things I wanted was a sidebar with columns so there are four widget areas in the theme. One in the footer, one that spans the whole sidebar and two that float underneath it and form two columns.

During the design process I found this article and fell in love with several of the color palettes. I since I couldn’t choose just one, I used several. So the there are a number of different color schemes to choose from. It’s easy to create your own, just copy one of the files in the CSS directory and replace the colors with yours. Put the new file in the directory and it’ll pop up in the pull-down list.

Allowing users to switch between color schemes meant needing an admin page. I’m not an expert with PHP but I have no problem experimenting, so I borrowed the code from another theme and customized it to meet my needs. Which is why you can also upload your own logo.

The beauty of all this is that both the themes I used were released with a GPL license that meant I could not only modify them but release the end-result to be used and/or modified by others.

If it’s accepted into the WordPress theme directory, I’ll post the link here.