An Introduction to WordPress Child Themes

Among the top features of WordPress is the ability to build a great-looking website even if you’re not a designer. Through the use of third-party themes, just about anyone with a bit of technical knowledge can create something that both looks and functions quite well. Add that to the fact that many themes are either free or otherwise affordable and you can see why so many people have jumped on the bandwagon.

But what a lot of people may not realize is that installing a theme and customizing it to match your needs is not the end of things. The reality is that, depending on what type of customizations you’ve made, those changes could be lost upon upgrading the theme in the future.

For example, imagine using the Twenty Seventeen theme – the default theme included with WordPress. Let’s say you directly edited a page template or even the stylesheet. While hacking your way through an existing theme is a great way to learn the ins and outs of development, it’s also quite easy to have all of those changes wiped out the next time you hit that update button. If you do that on a live site, it could be disastrous.

Thankfully there’s another, more secure way of doing things.

A Child Protects the Future

This is where the concept of the WordPress Child Theme comes into play. In short, it’s a separate theme that has its own folder inside your site’s /wp-content/themes/ directory. However, there’s a twist. Instead of being a full-blown theme, a child references back to its “parent”.

What that means is that your child theme’s folder only contains a few basic items:

• A functions.php file.
• A stylesheet (style.css) that contains only the styles you’re customizing or adding.
• Only the template files you want to customize.

The beauty of this setup is that you’re still taking advantage of all the goodies the parent theme has to offer, while also adding your own personal touches. Most of the hard design and development work has already been done by the theme’s author. From there, you can do as much or as little to it as you like.

Even better is that, whenever the parent theme is updated to the latest version, the child is left untouched. While that doesn’t completely protect you against breakage (we’ll get to this later), it does mean that your customizations won’t be overwritten. That’s a pretty big deal, as it’s no fun to go in and redo all of your hard work.

Setting Up a Basic Child Theme

The initial process of setting up a child theme is quite simple and should only take a few minutes of your time. Certainly a small price to pay considering the benefits it provides you both now and in the future.

Taking the example of the Twenty Seventeen theme (and the advice of the WordPress Theme Handbook), let’s walk through the most basic of child themes:

1. Create a new folder in your /wp-content/themes/ directory. It can be named anything you want, but we’ll stick with the WordPress recommendation by calling it: twentyseventeen-child

2. Create a new stylesheet and name it: style.css

Inside that CSS file, place a heading similar to this (you can customize it to match your specific setup):

/*
 Theme Name:    Twenty Seventeen Child
 Description:   My Twenty Seventeen Child Theme
 Author:        Your Name
 Author URI:    http://www.your-site.com
 Template:      twentyseventeen
 Version:       1.0.0
*/

There are other items you can place here, but note that the only required areas are the Theme Name and Template. The name can really be anything you’d like it to be – but pay careful attention to the Template declaration. That must match the folder name of your parent theme (twentyseventeen in our case). If that reference isn’t correct, your child theme will not work.

Below this information, you can add any custom styles you’d like to use in your child theme. If you’re changing existing styles, it might be worth copying and pasting them directly from the parent theme’s stylesheet or using your browser’s developer tools to easily spot the styles you want to target.

3. Create a functions.php file that, at the very least, references both your parent and child theme’s stylesheets:

<?php
add_action(  'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function  my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is  'twentyseventeen-style' for the Twenty Seventeen theme.
 
    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 ),
        wp_get_theme()->get('Version')
    );
}
?>

*Code modified from the WordPress Theme Handbook’s Child Theme guide.

Of course, the functions.php file is one that can be customized quite a bit as you develop your site further. But for now, this basic setup will at least get you started.

4. Copy over any of the parent theme’s template files (while keeping the originals in place) over to your child theme’s folder and modify them as you wish.

5. Inside the WordPress Dashboard, activate your new child theme by navigating to Appearance > Themes. If you’d like a picture to appear with your theme, add a 1200×900 PNG file named screenshot.png to the child theme’s root directory.

Odds and Ends

See how easy that was? Creating that child theme took almost no time at all and you’ve also done right by your site. But there are a few things you should know:

Things Could Still Break
While a child theme will protect your changes from being overwritten, it doesn’t guarantee that you’ll be problem-free forever. There are times when a parent theme introduces new features or even radically changes specific templates. This can cause unforeseen issues with any custom templates or styles that live in your child theme. The result is that you may have to redo some of your previous work using new copies of the templates in question.

Are You Using The Right Parent?
It almost sounds silly, but if you find yourself making massive changes to templates it’s fair to wonder if you’ve chosen the right parent theme to begin with. Remember, the idea of a child theme is make (and preserve) some custom tweaks – not to completely tear apart the original. You’ll want to work with a parent theme that is at least 75% or so of what you’re looking for. Otherwise, you may be better off with a starter theme or framework.

Parent Theme Documentation is Your Friend
Not all themes are created the same way. So while the quickie setup mentioned above works, it may not be ideal for your particular parent theme. Check out your theme’s documentation to see if there are any special considerations for creating a child (this is really starting to sound like a parenting article).

Congratulations on Your Child (Theme)

Child themes are one of those cool little WordPress tricks that can save you both some time and a few future headaches. They’re highly-recommended for situations where you want to take advantage of everything a third-party theme has to offer, while still having the ability to add your own customizations to the mix.

The post An Introduction to WordPress Child Themes appeared first on Speckyboy Web Design Magazine.