WordPress Themes and Child Themes

At this point in the WordPress process, you probably are anxious to use a theme other than the bland WordPress default theme. In this article, Linda shows how to choose themes and how to modify them easily and safely with the child theme option.

Child Themes

The child theme idea has gained footing among those who use the Hybrid Theme, but it is not a new option for developers. Basically, the child theme duplicates a theme (practically any theme) and allows you to build a new theme within a new directory. You can do whatever you want to this duplicated theme and it doesn't alter the functionality of WordPress nor the original theme code.

But – you must have the original theme uploaded to the WordPress themes folder before you can create a child theme, as your child cannot operate without a "parent" theme in the vicinity. So, accomplish that task first through the steps shown below.

First, Upload a New Theme

I'll be using Theme Hybrid as an example of how to build a child theme. Here are the first steps to building a child theme:

1.Download the theme you want to use (not guaranteeing that the theme you've chosen will work as a child theme, but guaranteeing that if you download Theme Hybrid that this experiment WILL work). You can download Theme Hybrid or any other theme from the Hybrid site for free, no matter whether you've joined the Club or not.

2.Extract the theme to your hard drive. You may need to develop a directory on your hard drive for various themes, and I often develop a folder even for Hybrid themes in case I download one that is not enclosed in a folder. Plus, I can name the folder on my hard drive so that I know exactly what the folder contains.

3.Upload the theme to your blog by using FTP or by uploading through your server's backend. Place that theme in the "WP-Content/Themes" folder, but be sure that you have NOT renamed that folder unless the developer, in the attached instructions for that theme (usually in the "read me" file), tells you how to name that folder.

4.Activate that theme by logging on to your WordPress administration page and by selecting the "Appearance" link in the left column and then activating the "themes" link. From the "Available Themes" section, click on the theme title (or theme screenshot) for the theme you wish to activate. A preview of the theme will be shown. To activate the theme click the "Activate 'Theme Name'" link in the top right.

Now you can right-click on the "Visit Site" link at the top left of your WordPress window to view the changes to your blog in another window or tab. Make note of the changes you'd like to make to begin. Do you want to change the colour? Do you want to alter the header? Or, do you want to change functions so that you have more possibilities available to you?

If you want something other than what you see online, don't touch that original theme. Instead, create a child theme based upon that theme with the following steps.

Creating a Child Theme

Creating a child theme is easy, and it can help you learn more about how to use CSS, HTML/XHTML, and PHP if you are a newbie to code. Additionally, creating a child theme can give you a small sense of accomplishment, as your final result is your creation.

1.Using the theme you have on your hard drive, create a duplicate folder and rename it. I usually use the name of the theme plus the word "Custom," as in "Hybrid_Custom" or "Hybrid Custom" (the use of an underscore is your preference). Make a note of the name you develop, as you'll need it in the next step.

2.Next, eliminate everything in that new folder other than the styesheet. Yes, you heard me right – eliminate ALL files except for the stylesheet (that stylesheet might simply be called "style" depending upon the theme).

3.Open the style sheet in your custom folder. Use an HTML editor or notepad (or Dreamweaver) to open it, as you do not want to alter any of the code through using a program that could alter that code. All the alterations you'll commit to that stylesheet will come from your own two hands.

4.The first and only change you will make at this moment will be in the header for that stylesheet, as this is the area that contains details about the Theme in the form of comments. Without this change, WordPress will not recognize that new design as a child theme, and that child theme will not be able to call to the parent for help. Here's what that heading looks like in the Hybrid theme, and how to change it:

The original Hybrid style header:

/**

 * Theme Name: Hybrid

 * Theme URI: http://themehybrid.com/themes/hybrid

 * Description: A user-friendly, search-engine optimized theme framework, featuring 14 custom page templates and multiple widget-ready areas, allowing you to create any type of site you want.

 * Version: 0.5.2

 * Author: Justin Tadlock

 * Author URI: http://justintadlock.com

 * Tags: theme-options, threaded-comments, sticky-post, microformats, one-column, two-columns, three-columns, fixed-width

 * Copyright (c) 2008 Justin Tadlock.  All rights reserved.

 * http://justintadlock.com

 * Hybrid is released under the GNU General Public License, version 2 (GPL).

 * http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

 */

How to change that Hybrid style header:

/**

 * Theme Name: Hybrid Custom

 * Theme URI: http://link-to-your-site.com

 * Description: Describe what your child theme should be like.

 * Version: 0.5.2

 * Author: Your Name

 * Author URI: http://link-to-your-site.com

 * Tags: Add, Whatever, Tags, You, Want

 *Template: hybrid

 */

Note the following:

1.Do not change the version number from the original, as your child theme will be based upon the original version. In fact, you may need to change that version number in your child theme when updates to the original, or parent, theme are made available.

2.Keep the template name the same as the original theme name. In other words, if you've download Theme XYZ, then the words that need to go next to the "Template: hybrid" would be "Template: theme xyz" (you also may need to stay specific with capitalization, depending upon the theme that you're trying to alter). The reason this is so important is that this is the only tool you have to call the functionality of the original theme.

Now, following the directions for uploading a theme to WordPress, upload that new theme folder to your WordPress Theme folder. That folder should contain only your altered stylesheet, nothing else. Then, go back to your admin panel to "Appearances/Themes" and your new folder should be there. Activate it, using the previous instructions on activating a new theme, and you now have your own theme that you can alter at will.