Nexcess
Nexcess Blog Logo
September 26, 2013

WordPress Basics: What Is A 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 wants. However, chances are that a theme will require some modification to tailor the site to its individual requirements. Themes are a great 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 may edit in order 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 downside is that if you edit themes 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.

So, what is a child theme in WordPress? And how can you use it to your advantage? Let’s define and explore this a little deeper.

What Is A Child Theme?

A child theme is, as the name suggests, a descendant of a theme that is edited. It inherits all of the functions and appearance of the main theme, but overrides the equivalent file in the main theme directory when a file is created in the child theme directory. WordPress 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 sheet (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; We’ll show you how to include the original file below.

For the purposes of this guide, we’re going to assume that you have at least some basic knowledge of CSS, so we won’t be going too deeply into the specifics of writing CSS styles.

How To Use A Child Theme

Often following the question “what is a child theme?” is “when, and how should I use a child theme?” WordPress gives you many different ways to update and edit your site. At times, it can be tricky to know which types of edits will serve you best.

We’ve already discussed one main function of a WordPress child theme. When updates are available for parent themes, a child theme will ensure that you don’t lose any changes you’ve recently made. The example in our introduction had to do with homepage fonts. You wish to change your homepage font, so you edit your theme. However, the next time an update is performed on that theme, you lose the changes you made to the font. Thus, using a child theme allows you to edit freely while maintaining up-to-date themes.

More efficient customization is another important feature when considering how to use a child theme. Choosing to create a child theme allows you to customize your site within the framework of an existing theme. This option is much quicker than coding from scratch, and it’s one of the many reasons WordPress is so widely used.

Alternatives To WordPress Child Themes

While child themes are useful for saving edits and increased customization, there may be times when you want to avoid them.

For example, if you’re using a custom-developed theme exclusive to your site, there’s really no need to create child themes. In this case, it’s important to ensure that your site is backed up and you have a copy of your custom theme if something were to break upon updating.

Another instance in which child themes might not be best is for functional updates. If you’re not entirely sure you want to stick with your current theme in the future, it’s much easier to use a plug-in to add specific functionalities.

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. It’s a fairly straightforward process which we’ve outlined below.

Steps For Creating A WordPress Child Theme

  1. Create a new directory (folder) in the theme’s directory. 
  2. Name your child theme directory. 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.
  3. In that directory, you should then create a file called ‘style.css’. 
  4. For a minimal child theme, this ‘style.css’ file is all you’ll need, but it must start with the following lines (edited as appropriate for your circumstances):
[php]/*
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
*/[/php]

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

As we 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. In order to make the contents of the parent theme’s style sheet available to the child theme, we simply import it with the following line:

[php]@import url(“../myparenttheme/style.css”)[/php]

The CSS rules of precedence cause everything written below this line to override the contents of the file you are importing. For example, to change the

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.

Final Thoughts

So again, what is a WordPress child theme? It’s an edited version of its parent theme intended to provide quick and easy updates while maintaining your site’s custom features. If you want optimal hosting services for your WordPress site, contact us today!

Avatar for Nexcess
Nexcess
Power up your sites and stores with custom-built technology designed to make every aspect of the digital commerce experience better. Make your digital commerce experience better with Nexcess. Visit Nexcess.net today and see how we can help.