Child Themes in WordPress – How and Why Use Them

April 29, 2016
Tweet
Share
Pin

The whole point behind WordPress is to give people the power to build, modify, and tune up their own sites or blogs. This is something that, just a decade ago, you needed to hire a professional designer/developer for.

Nowadays, you can take care of your site all on your own, and you can make it look whatever you wish.

But what if you want to go above what the WordPress Customizer allows you to do? What if you want to modify something about your current WordPress theme in a slightly more tailor-made way?

Well, that’s where child themes come into play.

Why use child themes

Let’s start from the other side of the coin:

The no.1 downside if you *don’t* use a child theme, and instead perform any modifications whatsoever to your current (normal) theme, is that all those modifications will vanish should you ever update the theme.

Now, what I mean by modifications:

  • any manual code edits done to any of the theme’s PHP files,
  • any modifications to the style.css file,
  • any new files that you might have put in the theme’s directory (this includes PHP files, CSS files, even graphics, literally everything) – this is a common problem if you have any custom page templates.

So just to emphasize on this once again, all of the above will vanish as soon as you update your theme.

But why is this bad?

Well, the problem maybe isn’t as brutal if the theme you use hasn’t been updated like ever. However, most of the quality WordPress themes tend to get refreshed a bit more frequently. And that is especially valid for the default themes in WordPress (e.g. Twenty Fifteen) – they get updated whenever there’s a new version of the WordPress core released.

In a situation like that, you don’t want to miss out on all the new things and patches that come with those updates. Effectively, they make your website work correctly with the new versions of WordPress, and also improve the security of the whole thing (fixing common security holes and bugs).

But there’s more. Using child themes gives you also added value in the form of better work organization.

Here’s the thing, if you attempt to edit anything inside your current WordPress theme, it’s more than easy to mess something up. For instance, you can accidentally erase some important line of code, or even a whole file, etc.

With child themes, all modifications are much better organized. Every file that’s in the child theme’s directory contains only your own code, so no more wondering, “have I modified file X or not?”

How to build your first child theme

This part is really easy, and it requires hardly any coding. First, though, some general guidelines:

  • Every theme can be a parent theme. In other words, you can build a child theme for any theme that you already have.
  • Child themes depend on the parent to do most of their “things.” In the most basic way, a blank child theme takes all of its code, design, styling, etc. directly from the parent without altering anything.
  • A child theme requires the presence of the parent in order to work. Once you delete the parent theme, your child theme will no longer work.
  • As mentioned before, you can update the parent theme and not lose any of your modifications.
  • In case of anything, you can switch to the parent theme at any time, and go back to the original version of your theme.

Now, onto the how-to. A child theme only needs a handful of things:

  • a new directory inside wp-content/themes, and with a unique name/slug, whatever you want to call it,
  • a style sheet file inside that new directory – style.css,
  • and a functions.php file.

Here’s an example child theme I built for the previous default theme of WordPress – Twenty Fifteen. I started by creating a directory called t15-child:

child

Next, I created two new files in that directory and called them style.css and functions.php:

child-theme-dir

Let’s edit the style.css file first. Here’s mine:

/*
Theme Name: T15 child KK
Theme URI: http://karol.cc/
Author: Karol K
Author URI: http://karol.cc/
Template: twentyfifteen
Description: My child of twentyfifteen
Version: 1.0.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: t15-child
*/

Nothing too fancy, as you can see. The two crucial lines in there have been highlighted:

  • Theme Name – the name of the new child theme, as it’s going to appear in the wp-admin, under Appearance / Themes.

child-theme

  • Template – the most important line here – it points to the parent theme by its slug.

Then, let’s go to the functions.php file. The only things I have there are:

<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style($parent_style, get_template_directory_uri().'/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri().'/style.css', array($parent_style));
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

This is just a simple new function. It takes care of two things:

  • it fetches the original style sheet of the parent theme, and
  • it “turns on” the new style.css file, so that you can perform further modifications to the theme’s design in that file.

Other important things to keep in mind:

  • Right now, you can modify your new style.css file freely. Whatever new class you put there, or whatever old class you modify, will impact your website and it’s appearance.
  • You can add other PHP files to your child theme’s directory. Those files can be completely new – for new custom templates, for example – or they can replace the standard files of the parent theme. For example, you can create a completely new version of the single.php file to handle the way your blog posts get displayed.
  • Everything you put in your new functions.php file will be executed similarly to how the native functions.php file in the parent theme works.

Have you created your child theme yet?

At this stage, your job is done, and you now have a basic child theme that you can use to perform further modifications to your website. Or, you can simply use this new child theme to make sure that whatever tweaks you already did will stay through the future updates of the parent theme.

What’s your take here? Are you planning to use a child theme on your WordPress site or blog?

Tweet
Share
Pin