Contact
Site: US UK AU |
Nexcess Blog

WordPress Basics: What Is A Child Theme?

September 26, 2013 1 Comment RSS Feed

Wordpress Child Theme

One of the strengths of WordPress is the massive range of themes that are available, both free and premium. WordPress sites can take almost any form a site owner might want. However, the chances are that a theme will have some aspect that requires modification to tailor the site to individual requirements. Themes are a very good way to get an attractive website up and running in next to no time, but they are inherently limiting.

Fortunately, it’s fairly easy to modify themes. All the files are readable and can be edited. Theme files live in the ‘themes’ directory beneath ‘wp-content’ in your WordPress directory. The files you might want to edit to change the appearance and the functionality of a WordPress site are written in PHP and CSS, both of which can be opened in a standard text editor.

For example, if you wanted to change the font that’s used on your homepage, you can open up the theme’s ‘style.css’ file, find the relevant line, and change it to whatever you want. Doing so will make the new font appear immediately upon a page refresh (assuming the font is available to the browser).

The bad news is that if you edit themes in this way, the next time you update the theme, all of your changes will be overwritten by the default theme files as they are updated. This is why it’s rarely a good idea to directly edit theme files. Instead, it’s better to use child themes.

What Is A Child Theme?

A child theme is as, the name suggests, a descendant of the theme that is to be edited. It inherits all of the functions and appearance of the main theme, but, when a file is created in the child theme directory, it overrides the equivalent file in the main theme directory. Child theme files are not overwritten when the main theme is updated, so the child theme persists between versions.

Rather than editing a theme’s “style.css” directly, you would instead create a ‘style.css’ file in the child theme’s directory and it would override original CSS file with the new instructions. You probably don’t want to override everything in the CSS file; I’ll show you how to include the original file below.

I’m going to assume that you have at least a basic knowledge of CSS, so I won’t be going too deeply into the specifics of writing CSS styles.

Creating WordPress Child Themes

Many well-written themes include a child theme already. In that case all you have to do is edit the child theme’s files. In some cases though, you’ll have to create your own child theme, which is a fairly straightforward process.

First, create a new directory (folder) in the themes directory. You can call it what you want but the convention is to use the name of the parent theme with “-child” added to the end. Don’t use any spaces in the directory name.

In that directory you should then create a file called ‘style.css’. For a minimal child theme, this is all you’ll need, but the ‘style.css’ file must start with the following lines (edited as appropriate for your circumstances):

/*
Theme Name: My Child Theme
Theme URI: http://mysite.com/
Description: Child theme for my new site
Author: Me
Author URI: http://mysite.com/about/
Template: myparenttheme
Version: 0.1.0
*/

The ‘Theme Name’ and ‘Template’ lines are required; the others are optional. The most important line is ‘Template,’ which must be the exact name of the parent theme’s directory.

As I mentioned earlier, you probably don’t want to override everything in the parent theme’s ‘style.css’ file and write the whole thing from scratch. To make the contents of the parent theme’s style sheet available to the child theme we simply import it:

@import url("../myparenttheme/style.css")

The CSS rules of precedence cause everything written below this line to override the contents of the file you are importing. To change the <H1> typeface, you would find the relevant styles in the parent theme’s ‘style.css’ file and copy them into the file we just created with the relevant changes.

The same basic process works for a theme’s PHP files. If you create a ‘footer.php’ file in the child theme, it will override the parent theme’s ‘footer.php’ file. The only exception to this is the ‘functions.php’ file, which is loaded in addition to and before its equivalent in the parent theme. You can see full details of how to handle ‘functions/php’ in the WordPress Codex.

Posted in: WordPress
  • Re. “The child theme] inherits all of the functions and appearance of the main theme…”

    The child theme won’t inherit the functions of the parent theme or be limited to them if you supply it with it’s own functions.php file where you can cut off functions in the parent theme and add ones it doesn’t have.