Blog PostChild Themes: A Sanity-saving Approach to Redesigning/Hacking WordPress Themes

A friend of mine, relatively new to implementing WordPress sites, emailed me yesterday asking for some advice. She was using Twenty-eleven as her base, and she had run into some problems bending it into the shape she wanted it. I called her and took a look at what she was doing. It became clear that the theme was already beginning to depart significantly from the original template code. Rather than creating a child theme, she was hacking page templates as well as CSS. Moreover, she sent me the Photoshop template that represented where she was headed, and I could not determine any relationship, structurally or visually, with Twenty-eleven. Twenty-eleven seemed to be the wrong theme for what she wanted to accomplish.

She wanted to know of a resource that would tell her how to get from the out-of-the-box Twenty-eleven theme to where she wanted to go with it. Lamely, I told her there was no such resource; no one could anticipate all the changes people would want to make and write a how-to covering them. Even more lamely, I told her she would just have to “hack away” and visit the Codex and wordpress.stackexchange.com when she encountered a problem. We briefly talked about child themes. Then she went away, disappointed.

As I thought about it, knowing I hadn’t been very helpful, I realized there was a basic mis-understanding about choosing a theme and designing around its structure and functionality. Someone had told her to design her theme in Photoshop, then select a good theme and hack it. Either they had not told her, or she had not understood, that theme selection is step one, then design should be based on that theme: utilizing its basic structure and incorporating whatever functionality it has that is useful for the particular site. I’m betting on the former: those of us with some experience are notoriously bad about skipping important bits of information when advising people with less experience.

Here is the list I sent her, suggesting she back up and start over:

  1. Use the child theme approach, leaving the original theme and its functionality intact. Some themes get updated, fixing bugs or adding functionality. Using a child theme allows you to take advantage of theme updates while maintaining your look-and-feel. http://codex.wordpress.org/Child_Themes
  2. Find a theme that is as close as possible, structurally, to what you want to end up with, and work within its structure as much as possible. Ideally, all you want to change is the appearance. This is like finding a house plan that suits you, then customizing it with floor coverings, wall coverings, paint, decor, and landscaping. Contrast the ease of that approach with starting with a 3/3/2 plan of a 1500-sq-ft single-story ranch, then changing it into a 2/2/2 plan of a 1800-sq-ft two-story Tudor; you probably should have started with a different plan.
  3. Once you’ve settled on a theme, create a Photoshop design template based on screen shots you’ve made of the theme demo (some themes provide a design template). Add guidelines that define the header width, content width, sidebar width, etc.
  4. Now you’re ready to design your theme.
  5. Try to change only things that can be changed using CSS: backgrounds, typography, color, position, etc.* This approach lends itself to using a child theme.
  6. Make a copy of the theme style sheet, make the changes at the top as described in Codex (above), and place it in a folder with a clever name, such as “mychildtheme.” Or even more clever, if you like. Upload the folder to your themes folder and activate the child theme. Hack away at the child theme CSS to implement your design changes (you may need to add an images folder to the child theme for background images). This is fun! Or at least, more fun than changing the ranch into a tudor.

*You can change column widths and position (structure) with CSS, but there are rarely only one or two places where those changes will need to be made. Can. Worms. You get the picture.

ShareShare on FacebookShare on Google+Share on RedditTweet about this on TwitterShare on LinkedInEmail this to someone

Comments are closed.