Creating a WordPress Child Theme

child theme in wordpress

Regardless of the theme you’ve chosen for your WordPress site, chances are you’re going to want to tweak and customize elements of it to suit your needs. You’re also going to want to ensure your theme is secure and up to date. However, if you hit the Update button after making adjustments directly to your theme, all your hard work could go right down the drain.

Creating a child theme will help you avoid this nightmare scenario. Essentially, a child theme is a ‘spinoff’ from its ‘parent’, from which you can then make modifications and changes, and carry out an update without losing them in the process. A child theme inherits its design and functionality from a parent theme.

In this article, we’ll delve deeper into what child theme are, what sites they are best suited for, as well as their advantages and disadvantages. Next, we’ll take you through how to create a child theme in WordPress. Let’s get cracking!

Editing Your WordPress Theme: Don’t Do It Without a Child Theme

Editing your WordPress theme can be a nerve wracking experience. After all, even one minor mistake on your part can cause hours of stress as you work to right your wrongs.

In addition, any changes you make to your theme will be lost as updates are released. You then have to make the difficult decision to stick with your current version and risk security vulnerabilities, or update your theme and lose all of your hard work.

Child themes are the solution to both issues, as any changes you make are preserved regardless what happens to the parent theme.

What is a WordPress Child Theme?

In a nutshell, a child theme inherits the functionality, design, and coding of its parent theme. While you can use it to experiment with different elements and features, it’s usually a permanent fixture of your site, and it becomes the de facto primary theme within your installation.

Overall, if you intend to modify the code under the hood of your WordPress site, you should use a child theme. This will preserve your changes, and give you flexibility if you wish to make tweaks to your design.

Child Themes vs. Custom CSS

At some point, you may find yourself wanting to make small stylistic changes to your website. The question then becomes: Should you update your child theme’s stylesheet, or input custom CSS?

Simply put, custom CSS is an area within WordPress’s Theme Customizer (and other third-party plugins) enabling you to add CSS that overrides the theme’s default style options. You can make simple changes here, such as background color and font style:

child theme vs custom css

You can also make these same changes within the child theme’s stylesheet, though not it’s not as easily accessible as using a custom CSS module.

In short, you could use custom CSS without any issues. However, on the whole, we recommend using a dedicated child theme, as you aren’t going to encounter any issues when a parent theme is updated.

The Advantages of Using a Child Theme

Aside from the various issues that child themes prevent, they have additional advantages. Foremost, they speed up site development and enable you to make customizations to your website directly, as there’s no need to worry about template files or extensive coding. If you’re looking to create multiple websites with a similar look and feel, copying and pasting the files from a child theme you like could speed the process up.

Additionally, child themes are incredibly flexible. They enable you to extend your website’s functionality, and the changes you make can be easily accessed and modified at any time. Child themes can also help those looking to hone their theme development skills in a more secure environment, although it’s definitely a secondary benefit.

We’ve already touched on how a child theme preserves changes when the parent theme is updated, and combined with the above, they’re a powerful feature of WordPress.

The Disadvantages of Using a Child Theme

Of course, no solution is perfect, and in order to use your child theme effectively, you’ll need to thoroughly familiarize yourself with the various functions and hooks of the parent theme. Depending on how feature heavy the parent theme is, this could require a major investment of time. WordPress beginners, or those with light technical knowledge, may also find this process overwhelming.

Another potential disadvantage is that, if your parent theme is abandoned by developers, your child theme runs the risk of developing security loopholes.

Tutorial: How to Create a WordPress Child Theme

There are two main methods for creating a child theme. Doing so manually will give you more control over the theme’s settings and attributes. However, using a plugin serves as a time-saving alternative. Let’s start with the manual method.

The Manual Method

To carry out these steps, you’ll need to install a File Transfer Protocol (FTP) solution and bone up on your FTP skills if necessary. For this example, we’ll use FileZilla, as it is user-friendly, reliable, and well-documented.

Step #1

Once you’ve opened up FileZilla, input your credentials into the Host, Username, Password, and Port fields. If you can’t find them in your hosting account’s back end, contact your provider’s support for assistance:

How to create a child theme in wordpress

After you’ve done this, you should see the files your server contains in the upper right-hand quadrant, at which point you’ll want to move onto step two.

Step #2

For this tutorial, Twenty Seventeen will be our parent theme. Once you’re connected, locate your website’s root folder (it’s usually called public_html, www, or the name of your website), and navigate to wp-content > themes, in the upper right-hand quadrant.

create a child theme

Next, we’ll look at creating the child theme itself.

Step #3

FileZilla’s bottom right-hand quadrant contains your selected folder’s files. This is where we’ll create our child theme, so create a new directory and name it twentyseventeenchildtheme:

steps to create a child theme

Once your directory is created, you’ll need to ‘link’ the parent and child theme.

Step #4

Within the newly-created directory, create a new file and name it style.css. Of course, it’s not a true stylesheet until you enter CSS code. Next, open the file in your preferred text editor (TextEdit or Notepad will suffice at this stage), and paste in the following code (replacing the information pertaining to the Twenty Seventeen theme with that of your chosen parent theme):

/*
Theme Name: twentyseventeenchildtheme
Theme URI: https://wordpress.org/themes/twentyseventeen/
Description: Twenty Seventeen Child Theme
Author: John Doe
Template: twentyseventeen
Version: 1.0
*/

Next, you’ll need to make sure your child theme can access the current style of your parent theme. To do this, follow the same steps as above, but this time name the file functions.php and add this code:

<?phph
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

This allows the parent theme’s stylesheet to be loaded whenever the child theme is used. Finally, navigate to Appearance > Themes in WordPress, locate your newly-created child theme, and activate it. Your website’s child theme should now be your primary option.

The Plugin Method

If you’d rather learn how to create a WordPress child theme without any coding, there are a number of excellent plugin solutions to choose from. Let’s take a look at some of them.

Child Theme Configurator

plugin to create a child theme

Child Theme Configurator makes it easy to rapidly generate a child theme, and customize it with options not provided by the default WordPress Customizer. It comes with an intuitive interface, letting you create and customize your child themes in seconds.

You can identify the CSS attributes you want to change without having to look for them. The plugin will then automatically create your child theme in a single click. Every stylesheet will be indexed so you can go back at any time to look at the log of what you’ve done. 

As well as creating a child theme, the plugin will also help you identify potential problems with your theme and address them. You will have the power to truly customize every part of your website.

Although the basic plugin is free, a premium version is available for $19.95.

Child Theme Creator by Orbisius

child theme plugin

This extremely lightweight but versatile plugin lets you create child themes with just one click using the simple interface, and you can even combine elements from different child themes to make your own unique creation. 

It also includes a handy feature to let you edit two theme files simultaneously (which is useful if you are creating a series of sites with a similar look and feel). Also, the choice of two theme editor screens takes the hassle out of selecting and transferring code snippets between themes.

If that’s not enough, Child Theme Creator also uses minified CSS. This helps ensure that your theme – and as a result, your website – loads quickly.

Child Theme Creator by Orbisius is well-documented and supported, and has a free version available. More feature-heavy premium version of the plugin starts at $4.99.

Child Themify

wordpress plugin for creating a child theme

Despite being among the more basic child theme plugins, Child Themify is practical, streamlined, and completely free.

It features a suite of drop-down menu options letting you set the parent theme, the child theme name, and any additional theme files you’d like to include. As with Child Theme Creator, you can generate your child theme with one click.

Reliable and Affordable WordPress Support With WP Engine

At WP Engine, our stellar team are committed to keeping your WordPress site running smoothly (child theme or not). Our dedicated resource center contains a wealth of guides, practical tips, articles, and insights to help you enhance your site. If you have any specific enquiries or concerns, our support staff are able to help 24/7.

To find out more about our about our quality hosting plans, or find out how we can boost your WordPress site performance, don’t hesitate to contact us today!

Get started.

Build faster, protect your brand, and grow your business with a WordPress platform built to power remarkable online experiences.