HowTo – Understanding WordPress Child Themes

Filed under: Wordpress Tips

wordpress-logoMoving forward with WordPress 3 the use of Child Themes will be something that many of us come into contact with. Although I personally don’t like the concept because it means managing too many things in too many places there are reasons to use Child Themes. So, lets take a look at the basic concept of Child Themes and how they can be applied to a Parent Theme.

To understand how to create a Child Theme you should have a basic understanding of the WordPress Theme Hierarchy and the core pieces of code that make up any page.

What is a Child Theme

Child themes in WordPress are a way to keep most or much of the original theme that you have originally selected and make alterations only to specific CSS, Theme Templates or Functions without deleting the original code.

Most of my themes are developed from scratch from a few starter layouts that I keep on hand. Working from beginning to end with my own code is slightly more time consuming but the good thing is I know where everything is.

Child themes are for situations where you are redesigning a theme for a customer that really likes most of the product and needs a few changes.  If you are working with a commercial theme you may be altering a highly technical and large volume of php and html/css formatting that could take you hours or days to upgrade when a new version of the original theme is available.

Placing a subdirectory in the theme file  as
/wp-content/themes/originaltheme/childtheme
you can begin altering parts of the theme while leaving the rest in place.

Once you have completed your changes that will override the original themes features you can select the child theme as an option in your Appearance Menu.

A Child Theme can be as simple as a new CSS File if that is all you need to change or it can be as complex as adding any number of template files, images and other features to almost completely change the theme to something else.

NOTE
Like I said often I start with a template I have self made and format it to fit the site without the use of child themes. Once you get extremely complex (changing and not just adding many files) you may as well just make a new parent theme based on the original.

Getting Started

The only Manditory file in a Child Theme is the CSS File
Make a subdirectory in your Parent theme and add the file style.css

The new style.css file will override the css file of the parent so copy the contents of the parent’s file for modification.

The Header of the style.css file must be properly formatted so that it will work in unison with the Parent Theme.

The example below shows the possibility of importing the Parent Theme’s CSS file with a standard CSS @import but it is highly likely that you will get confused jumping from file to file so if you are making a large number of CSS Changes simply copy the parent and don’t import.

[php]
/*
Theme Name: My Child Theme
Description: My Child Theme for the Twenty Ten theme
Author: Your name here
Template: twentyten
*/
@import url("../twentyten/style.css");
}
[/php]

The most important line above is the Template: naming. This is where you call the parent theme. It is important that you use the same name and case as the parent uses in its CSS file to name the theme.

The next important line is the Theme Name you give to your child theme. The theme name will be shown in your available theme selections.

Template Files

When you want to make changes to specific theme template files like single.php home.php index.php simply place the new files in the child theme directory.

New template files will override the Parent Theme files.

You can also add additional files like any number of  specific category templates … category-123.php  file or simply a home.php file.

Functions

When adding a new functions.php file to your child theme directory you will be  piggybacking your functions on top of the parent theme’s functions file.

It is important that you use proper naming procedures to allow all your functions to work together.

Theme Updates

Although Automatic updates should be smart enough to not delete your child theme it is very important that you make a backup of your parent and child theme before making any updates to new versions of a parent theme.

Final Note

Most WordPress themes come with a license that allows you to make modifications. Using a child theme allows you to make those modifications without touching the original files but it can also introduce some unneeded complexity when trying to debug problems.

In addition to adding more complex file management there is no guarantee that any future upgrades to your current parent theme will follow previous coding definitions or that you will ever even see an update to your theme.

Child themes do have their place and that may be with designers that want to make quick changes for a customer or content providers that want to make one theme and then apply it to many sites by modifying the CSS.

Good or bad it is an option that you should understand and make use of when necessary.