WordPress Child Themes Basic Structure

What is a child theme?

Child themes are a fairly new concept as far as their use in WordPress. Simply put, a child theme is a theme that inherits the functionality of another theme, known as the parent theme. The child theme allows you to modify, or add to, the functionality of that parent theme.

This tutorial will show you how to create a basic child theme. It also explains what you can do with your child theme after you create it.

We will use as our parent theme in the examples the new default Twenty Ten WordPress 3.x theme.

You may be thinking that creating a child theme from scratch has got to be terribly difficult and extremely complicated. Not so! Making a child theme is actually very simple.

How easy? Simply create a directory, put a properly formatted style.css file in it, and you have a child theme! How easy is that?

With a little basic knowledge of HTML and CSS, you can make your newly created basic child theme modify the styling and layout of a parent theme to whatever extent you wish without editing the files of the parent theme itself.

You may be wondering what the big deal is about being able to use a child theme for your modifications. Why not just make your modifications to the parent themes stylesheet instead?

The answer is simple. If you spend hours modifying the parent theme stylesheet, and then you update your parent theme, all of your modifications get overwritten, and your work goes down the drain. When you only make modifications to the child theme stylesheet, the modifications remain intact when the parent theme is updated.

It is for this very important reason that child themes are the recommended way of making modifications to a theme.

Child theme directory structure

A child theme should be located in its own directory in wp-content/themes. Below we show the location of a child theme and also its parent theme (Twenty Ten) in a typical WordPress directory structure:

Location Of Parent….. public_html/wp-content/themes/twentyten

Location Of Child….. public_html/wp-content/themes/twentyten-child/style.css (required file in a child theme; must be named style.css

The child theme can consist of as little as a style.css file, and it also can consist of as much as any regular WordPress theme, such as:

1. style.css (required)
2. functions.php (these are optional)
3. Template files (these are optional)
4. Other files (these are optional)

Let’s examine each of those…..

The style.css file, which is required

style.css is the only required file in a child theme. This file provides the information header that allows WordPress to recognize the child theme, and it replaces the style.css of the parent. The exception to this is when you use the @import code to import the parent theme stylesheet. This is explained in more detail below..

Just like with any WordPress theme, the information header must be at the top of the file. The main difference here is that in a child theme the Template: line is required. It is required so that WordPress knows which theme is the parent of the child theme.

Here is an example of an information header that you might see in a child theme’s style.css:

/*
Theme Name:     Twenty Ten Child
Theme URI:      http: //yourwebsite.com/
Description:    A Child Theme For The Twenty Ten Theme
Author:         Include Your Name Here
Author URI:     http: //yourwebsite.com/about/
Template:       twentyten
Version:        0.1.0
*/

Here is an explanation of each line in the information header shown above:

• Theme Name. (required) Child theme name.
• Theme URI. ( this is optional) Child theme webpage.
• Description. (this is optional) A description of the theme.
• Author URI. (this is optional) Theme author’s webpage.
• Author. (this is optional) Author’s name.
• Template. (required) directory name of parent theme, case-sensitive.
• Important…... You have to activate a different theme and re-activate the child theme when you modify this line.
• Version. (this is optional) Child theme version. E.g.: 0.1, 1.0, etc.

Any code that you put after the closing */ of the header works as a regular stylesheet file. That is where you put the styling rules that you want WordPress to apply.

Now, in view of the fact that a child theme’s stylesheet replaces the stylesheet of the parent completely (the parent’s stylesheet is not loaded at all by WordPress), picture this scenario…..

What if all you want is to modify a few small things in the styling and layout of the parent?

There is a very easy way to do that! Rather than make something new from scratch— you can simply import the stylesheet of the parent, and then add your modifications vis the child stylesheet.

The following example shows you how you can use the @import rule to do that.

Example of a basic Child Theme using @import to import the Parent Theme stylesheet

Our parent theme for this example will be the default theme Twenty Ten. Let’s assume we like nearly everything about the Twenty Ten theme except the color of the site’s title, which we want to change from black to maroon. Using a child theme, we can accomplish that in three simple steps:

1. Create a new directory in your sites wp-content/themes folder, and name it twentyten-child (or whatever name you prefer).
2. Save the code below in a file named style.css, and up[load this file to the new directory.
3. Login to your site admin area, go to Dashboard › Themes and activate your new theme, the Twenty Ten Child (or whatever you named it).

/*
Theme Name: Twenty Ten Child (or whatever name you prefer)
Description: Child theme for the Twenty Ten theme
Author: Your name here
Template: twentyten
*/

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

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

Now, this is what the above code does, line by line:

1. /* opens the child theme’s information header.
2. Theme Name: declares the child theme’s name.
3. Description: describes the theme. (Optional; can be omitted.)
4. Author: declares the author’s name. (Optional; can be omitted.)
5. Template: declares the child theme’s parent; or, in other words, the directory of the theme whose templates the child uses.
6. */ closes the child themes information header.
7. The @import rule imports the parent’s stylesheet.
8. The #site-title a rule defines a color (maroon) for the site’s name, effectively over-riding or over-ruling the corresponding rule of the parent.

Important note on the @import rule

There must never be any other CSS rules above the @import rule. If you put any other rules above it, it will then be invalidated and the stylesheet of the parent will not be imported.

Using a functions.php file in your child theme

Unlike the style.css file, the functions.phpfile of a child theme does not override its counterpart in the parent theme. Instead, it is loaded in addition to the parent themes functions.php file. (Actually, it is loaded right before the parent’s file.)

In view of that, the functions.php file of a child theme provides an easy method of modifying the functionality of a parent theme. Suppose that you want to add a PHP function to your theme. The fastest way would be to edit its parent themes functions.php file and put the function there. While that may be the fastest way, it doesn’t prove to be the smartest way.

The next time you update your theme, your function will disappear. Don’t worry though, there is an alternative way which is the smart way and it is also an easy way. You can simply create a child theme, if you aren’t already using one, and add a functions.php file in it, and then simply add your function to that file. That function will do the exact same job as adding it to the parent function.php, but with the added advantage that it will not be affected by your future updates of the parent theme.

The structure of functions.php is fairly simple: Put an opening PHP tag at the beginning, a closing PHP tag at the end, and, between them, your lines of PHP code. You can put as many or as few functions as you wish, whatever you need to accomplish your desired results.

The example below shows a simple functions.php file that does one simple thing, it adds a favicon link to the head element of HTML pages.

function favicon_link() {
    echo '
' . "\n";
}
add_action('wp_head', 'favicon_link');

Using STYLESHEETPATH

When including files in a child themes functions.php, to keep it readable you’ll need to use the STYLESHEETPATH constant instead of the more typically seen TEMPLATEPATH.

require_once( STYLESHEETPATH . '/path/to/file/in/child/theme.php' );

Template files

Templates in a child theme behave just like style.css, meaning that they override their namesakes from the parent theme. A child theme can override any parent theme template by simply using a file with the same name. (Notice….. index.php can be overriden only in WordPress 3.0 and newer versions.)

Here again, this WordPress feature lets you modify the templates of your parent theme without actually editing them, so as a result your modifications are preserved when the parent theme is updated.

Below are a few examples of using template files in a child theme:

• When you want to add a template that is not offered by the parent theme (for instance, a template for a sitemap page, or for a single-column page with no side-bars).Once added, they will be available to select in the Page Edit screen.
• When you want to add a more specific template than what the parent offers (for instance, a tag.php template to use for tag archives in place of the generic archive.php of the parent).
• When you want to replace a template of the parent (for instance, to make your own custom home.php to override the parent’s home.php).

Other files you can include in your child theme

In addition to style.css, functions.php, and template files like index.php, and home.php, your child theme can use any type of file that regular WordPress parent themes use, as long as that file is linked properly to the parent theme. So, for example, a child theme can use icons and images that are linked from its stylesheet. It can include JavaScript files linked from the top or bottom of pages. It can include extra PHP files called from its templates or from its functions.php file.

That concludes this tutorial on WordPress Child Themes. Remember, if you want some really advanced training on using WordPress like the pro’s do, check out what is available at WebDesign.com