WordPress Child Theme Basics

In this post you’ll learn all the basics of WordPress Child Themes: WordPress Child Theme file structure, how to make any WordPress Theme a blank framework, how to import Parent Theme CSS styles, how to override Parent Theme styles, and how to override Parent Theme Template files. You’ll also learn that all of this is incredibly easy and within your grasp and that it might just change how you think about WordPress and Theme development.

Child Theme File Structure

WordPress Child Themes are located in /wp-content/themes/ like any other WordPress Theme. They’re activated from the WordPress admin like any other theme. They’ll always have a style.css file and may often include a functions.php file. They can contain images folders, script folders and include folders. Really, they’re just like any other WordPress theme.

Except they don’t need theme files. None at all. Zero. You don’t need to understand PHP in the slightest to create a WordPress Child theme.

The Comment Section In The Child Theme Stylesheet

The key to understanding how WordPress Child Themes work lies in one single line of a basic WordPress theme style.css file.

Here’s an example style sheet header from the WordPress Codex.

/*
Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
.
General comments/License Statement if any.
.
*/

We’ll be concerning ourselves with 1 particular line from the style sheet header.

Template: use-this-to-define-a-parent-theme--optional

According to the WordPress Codex

The simplest Theme includes only a style.css file, plus images, if any. To create such a Theme, you must specify a set of templates to inherit for use with the Theme by editing the Template: line in the style.css header comments.

What does this mean? We simply have to replace use-this-to-define-a-parent-theme--optional with the directory name of another installed theme—now called the Parent Theme—and we’re ready to begin.

A Framework Ready For Your CSS

Let’s make a WordPress Child Theme for one of the featured themes on the WordPress Theme directory, Fusion. We’ll call our new Child Theme, Fission. But first, a warning: this will be really easy.

We need to make an appropriately named directory in /wp-content/themes/ for our new Child Theme. That gives us /wp-content/themes/fission/.

In that /fission/ directory create a new file called style.css. Open style.css up in your favorite text editor.

Copy the following 5-line style sheet header into style.css and save the file. Pay close attention to line 4.

/*
Theme Name: Fission
Description: A Child Theme of Fusion
Template: fusion
*/

You just made a WordPress Child Theme for Fusion. Activate Fission from the Themes section of your WordPress admin. If everything went right … it should probably look wrong. That is, it should look like a brand new, valid HTML document in your browser, without any styling.

It might not look like much but if we look at the actual HTML skeleton of the the theme in Firebug we’re reminded that a lot of CSS design is simply a matter of manipulating containing divs and block level elements.

Here’s what this all means: you’re now ready to use the HTML output by this Parent Theme—a theme that has 19 PHP template files—as a framework, or canvas, for your design.

If you’re not a Theme developer you’ve just made yourself a fully functional blank WordPress Theme to start working with. You don’t have to know PHP. Just CSS and HTML. If you are a Theme developer, you can see what we did there. You can now easily reuse the same code base again and again, making room for easy updates to the code by untangling the presentation from the core of the theme as far as it will go.

Importing Parent Theme Styles

Of course, we’ll need to use CSS to make it look less wrong. For demonstration purposes, and for people new to making changes to a Parent Theme in this manner, we’re going to import the styles from the Parent Theme by adding only 1 line to our Child Theme style.css.

/*
Theme Name: Fission
Description: A Child Theme of Fusion
Template: fusion
*/
@import url(../fusion/style.css);

It should look … exactly the same as the Parent Theme, Fusion. This is not a mistake. This is revolutionary. What you’ve just created is a safe space to make changes to the Parent Theme without touching any of the original theme files.

Overriding Parent Theme Styles

Alright, now let’s say you want to make some simple changes to your Parent Theme. What do you do? Using something like Firebug you can find out where the offending styles are in the Parent Theme CSS.

Then just copy and paste the code into your Child Theme CSS where you can edit it safely (making sure to delete the reference to the filename that Firebug produces: “style.css (line 183)” in the example below).

/* Overriding the h2 styles from the Parent Theme */
h2 {
	font-family:"Palatino Linotype",Georgia,"Tahoma","Century Schoolbook L",Arial,Helvetica;
	font-size:250%; /* Increasing the font size */
	font-weight:bold; /* Making the titles bold */
	margin:0.6em 0 0.3em;
}

And when your Parent Theme is updated, your new Child Theme styles will still stick.

Overriding Parent Theme Template Files

Editing with CSS is great and it’s very easy to learn just enough to safely make changes to a WordPress theme but what happens when you really do need to make changes to a template file? When there’s something hardcoded in?

Easy. Copy the Parent Theme template file to your Child Theme directory and make the edits there. As of version 2.7, WordPress will look in the Child Theme directory first for template files. And if an alternate version of, say, footer.php, or single.php exists, WordPress will use that template file instead. This is simply awesome. WordPress will even accept category-XX.php (where XX is the ID of a particular category) in a Child Theme if you want to make changes to a specific category archive.

How To Modify WordPress Themes The Smart Way

This post is part of the series How To Modify WordPress Themes The Smart Way.

1. WordPress Child Theme Basics
2. Modular CSS in WordPress Child Themes
3. Using Filter Hooks in WordPress Child Themes
4. Using Action Hooks in WordPress Child Themes