7 Easy Steps To Creating A Child Theme

code_editing

1) Download your favorite WordPress theme

2) Upload it to your wp-content/themes folder

From here on out we will not be touching the original or Parent theme at all!

3) Create a new folder and name it “mycooltheme” or whatever you want*

4) Open the original themes style.css file and change the top portion (if it exists in this format) with the following:

/*
Theme Name: Original Theme Name - Custom
Theme URI: http://yoursite.com/Original Theme Name-custom
Description: Write a short description.
Template: Original Theme Name
Author: Your Name
Author URI: http://yoursite.com
*/

The most important part of this whole process is this line:

Template: Original Theme Name

The Original theme name MUST match the original theme. If you are using the popular options theme then it would be:

Template: options

If you are using the popular basic2col theme then it would be:

Template: basic2col

5) Upload your new style.css with the above changes into the new folder you just created. Also upload the original themes screenshot and the complete images folder and the functions.php if it has one.

You may be able to edit such things as single.php or pages.php by editing and including them in your child theme folder, but Read your themes documentation. You may have to edit them in the functions.php or the themes settings.
The header and footer.php files shouldn’t need to be touched if you are using Justin’s themes. He provides for including header includes and footer includes in the Theme settings.

6) In your dashboard click on Design (or Appearance in 2.7) and select themes. Select your new theme (Not the original) click OK or Activate. You are now using your child theme you just created!
Click on the Theme Settings in the Dashboard/Appearance section and setup your theme.

Wasn’t that easy?

Uhmm Ron it looks exactly like the original!

7) This is where you make the theme your own. Make any changes you need to make to your new style.css to change colors, bullets, images, fonts… whatever you want to change to make the design your own! Be sure to upload any new images you may be adding into your child themes images folder, not the original themes images.

Now when a new version of your theme is released you can just upload it into your themes folder replacing the original theme. This leaves your custom child theme still intact without having to remember what you previously changed.

*Notes: When choosing a theme name think keyword. If your blog is about Hawaii use themename-keyword
or as example using the basic2col theme: basic2col-Hawaii

First this will give a keyword in the first sentence of your style.css and second it helps you keep track of the themes in your computer files and what blog they belong to. If you have 3 blogs and all three child themes are named options-custom then you could mistakenly upload the wrong css file, image or something later on when you make future changes and mess everything up.

I keep mentioning Justin Tadlock’s themes in my posts. I fell in love with his themes about a year ago and I am slowly switching all of my blogs over to his parent themes. He has also created several child theme designs for you to use with his themes. Choose the child theme with the closest layout and color scheme you want and make your changes from there.

I wish I would have understood just how easy using child themes was from the start. I hacked up one of Justin’s themes pretty badly with all my modifications on another blog and I’m looking at several hours work to fix it the right way, with WordPress 2.7 just around the corner, I can’t put it off any longer.

4 thoughts on “7 Easy Steps To Creating A Child Theme”

  1. Great post.

    It is also important to remove all sidebar widgets and deactivate the plugins before you switch themes! Otherwise a couple of widgets and plugins will stay linked to the old theme, still show but you can’t access their options anymore after switching themes!

  2. Great point, thanks.
    Before you go deactivating your plugins though, make sure you copy the contents of each of them.

    Open Notepad or your favorite editor and copy each widgets content individually, then disable the widgets.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.