What Is a Child Theme In WordPress?

After you choose the right theme for your website, you might want to modify it to meet your needs. However, customizing a WordPress theme can be a tricky process. If you edit your theme files, you could risk losing your changes after a new update.

Fortunately, creating a child theme can resolve this issue, enabling you to safely edit your site’s design. It will also preserve these changes when you carry out updates. 

In this post, we’ll explain what a child theme is and why you might consider using one. Then, we’ll show you how to create and customize your own child theme. 

Note: Let’s take a moment here to mention that the world of WordPress themes has been evolving rapidly. Most of this article will be focused on a discussion of what we now call “classic themes”. The WordPress Gutenberg block editor is fundamentally changing the way themes are created, and the future is inevitably going to be all about “block themes” with Full Site Editing enabled, which are different from the classic themes we’ve grown accustomed to over the years. Child themes are especially useful for classic themes, while perhaps not as useful for block themes. We’ll present some tips and advice for using child themes for block themes at the end of the article.

What Is a Child Theme?

When you install a classic theme from the WordPress Directory, you’re using what is known as “the parent theme”. Essentially, this is a complete theme that contains all the template files and assets it needs to work.

Although you can customize this theme directly, this can pose some risks. If there’s a theme update, you could lose all of your customizations. For this reason, many developers and designers choose to create a child theme. 

Put simply, a child theme inherits the style, features, and functionality of a parent theme. It creates a separate set of theme files that you can edit and customize without affecting the original theme.

Pros and Cons of WordPress Child Themes

Since child themes look the same as their parent themes, they make it easier to work on your site’s design. You can simply use the premade template files from the parent theme, without having to code your pages from scratch.

Here are some additional benefits that child themes can offer:

  • The parent theme is available as a fallback if you make mistakes.
  • Child theme customizations are portable and replicable.
  • They enable you to learn theme development in a safe environment. 

There are also some downsides to using a child theme. Since it’s dependent on the parent theme, you may lose important features if the original developers decide to discontinue them. Additionally, creating and modifying theme files requires a certain level of coding experience.

Note that some customizations can be implemented without a child theme. In general, child themes are an effective option if you’re adding custom CSS. However, you can also add new features and functionality by using the right WordPress plugin.

Did You Know? Our designers create beautiful block-based themes, with Full Site Editing built-in. Curious to know what some of them look like? Take a peek at our themes.

How to Create a Child Theme in WordPress (In 4 Easy Steps)

If you decide to use a child theme for your website, you’ll need to learn how to create it. Before you get started, we need to note two important things: 

  1. You’ll need a WordPress.com plugin-enabled plan to perform these steps.
  2. Since you’ll be working with code, you’ll want to make sure you have a recent version of your site that you can restore just in case something goes wrong. So, make a backup before you begin. 

Now, let’s look at how to create a child theme in WordPress. 

Step 1: Create a Child Theme Folder

When you’re ready, navigate to Appearance → Themes in the WordPress dashboard. At the top, you’ll see your current theme, along with a button that says Info. Click this button, then scroll down and click the Download button.

The theme will download as a .zip file, so you’ll need to extract it. For Mac users, you can simply double-click on the file. Windows users can right-click and choose Extract all.

Then, create a new folder. We recommend that you use the parent theme name with “-child” at the end.

Now, open the parent theme folder and find the style.css and functions.php files. Copy both of these files and paste them into the child theme folder.

That’s it. Now you’re ready to create a new stylesheet for the child theme.

Step 2: Create a New CSS Stylesheet

Next, you’ll need to create the main stylesheet file for your child theme. This will contain basic information about the theme, including its CSS rules and declarations. Essentially, this stylesheet will identify the child theme and link it to the parent theme.

Start by opening the text editor of your choice. If you’re using a Windows operating system, consider using Notepad++. For Mac users, Visual Studio Code can be an effective alternative. 

Then, open the style.css file and remove its code. To do this on a Mac computer, you can click command+A > delete. For Windows, use CTRL+A > delete.

Now that the style.css file is empty, you can paste the following code:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI: http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:   John Doe
 Author URI:   http://example.com
 Template: twentyfifteen
 Version:  1.0.0
 License:  GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:     light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

You’ll need to update this information to match the details of the parent theme you chose. 

For the template line, make sure that it matches the folder name of your parent theme. 

Here’s what this would look like with the Twenty Twenty-Two theme:

When you’re ready, save your changes. If you want to add custom CSS, you can do this after you activate the theme in WordPress. 

Step 3: Enqueue the Parent and Child Theme Stylesheets

Next, you’ll need to enqueue the parent and child theme stylesheets. This will enable the child theme to inherit the styling of the parent theme. It will also ensure that the child theme’s stylesheet loads before the parent’s, so that you can modify the functions from the original theme. 

Although this may sound complicated, you’ll only need to paste some code. First, open the functions.php file with the same text editor. Like with the style.css file, you’ll need to delete its content. 

Next, copy and paste the following code:

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'twentytwentytwo-style'; // This is 'parent-style' for the Twenty Twenty-Two 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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

For the ‘$parent-style’ value, make sure to include the name of your theme. The end result should be ‘themename-style’.

Once you’ve added this code, you can go ahead and save the file. You can now move on to the final step. 

Step 4: Activate Your Child Theme

Before you upload the new theme to WordPress, you’ll need to zip the folder. If you have a Windows computer, right-click on the folder you want to compress. Then, select Send to > Compressed folder.

For Mac users, you can right-click on the folder and select Compress. The zipped folder will appear in the same directory as the original folder.

Next, navigate to your WordPress.com dashboard. To upload the new child theme, go to AppearanceThemes and select Install Theme.

Then, click on Upload Theme. Here, you can upload both your parent and child theme in their compressed format.

Once you have both themes installed, activate your child theme. When you visit the front end of your website, it should look the same as the parent theme.

How to Customize a Child Theme

Now that you’ve activated your child theme, it’s time to customize it. By editing its files, you can add new styling and functionality beyond the default parent theme options. 

1. Add Custom CSS

You can edit your site’s design by adding custom CSS to the style.css file. For instance, you can change the color scheme, typography, spacing, and other elements. 

Fortunately, WordPress.com makes it easy to customize your theme with additional CSS coding. You can do this by navigating to Appearance → Additional CSS.

This will open the Additional CSS tab of the WordPress Customizer. Here, you can paste your code and view the results on the front end.

You can insert a CSS rule to change your child theme’s font type, size, and color. Here’s an example:

p {
color: teal;
}
p {
font-family: Georgia;
font-size: 18px;
}

After you paste this CSS into the text box, you’ll see the changes on the front end. In this case, the font changed to a teal Georgia typeface that is 18px.

You can continue to use CSS to create a custom menu, style your buttons, add hover effects, and much more. This can be an easy way to tweak the appearance of your site. 

When you’re ready, click on Save Changes. This will automatically apply your changes to the child theme.

2. Edit the functions.php File

The theme’s functions.php file contains PHP code that adds features to your website. When you want to customize a theme with unique features, you can add new functions to this file. 

Once you’ve activated your child theme, go to ToolsTheme File Editor.

Then, click on the Theme Functions tab. This will open your functions.php file.

Here, you can add new functions to customize your child theme. For instance, if you want your theme to support post thumbnails, you could paste this code:

add_theme_support( ‘post-thumbnails’ );

If you want to avoid editing your theme files directly, you can use a plugin instead. The Code Snippets plugin enables you to customize your theme with code.

To create a new code snippet, click on Add New. Then, give it a title and select the Functions tab.

In the text box, enter the coding for your snippet. Next, you can choose exactly where to run the snippet. Once you’re finished, click on Save Changes and Activate. This will add the new function to your child theme. 

Start Using Child Themes for Your Classic WordPress Themes

You might hesitate to modify your theme because you’re worried about breaking your site or losing important data. By creating a child theme, you can add new features and functionality while protecting your content. 

Now Forget Everything You Just Read If You Use A Block Theme

We mentioned in the beginning of this article that the instructions would be focused on classic themes. Block themes are very different and with the emergence of Full Site Editing (FSE), the old warning to never edit theme files no longer makes sense. With FSE, you are encouraged to make changes – using the visual block editor and without having to code – to all parts of the theme. Child themes can be created for block themes. Instead of creating a style.css and functions.php file, you would create a style.css and theme.json file instead. However, child themes for block themes tend to come with numerous issues that make the process less than ideal. Several theme authors discuss whether block themes are even needed, or if simply swapping out a theme.json file accomplishes the same goal. We are excited about the future of WordPress theming. Block themes, Full Site Editing, and no-code control over all parts of a theme point to lively and intriguing times ahead for WordPress theme designs. If you choose to forge ahead with block themes, we recommend skipping a child theme for now. Perhaps, in the future, it will make more sense to use one, but we think it will become even less likely to be useful.

ABOUT THE AUTHOR

The WordPress.com Team

At WordPress.com, our mission is to democratize publishing one website at a time. Create a free website or build a blog with ease on WordPress.com. Dozens of free, customizable, mobile-ready designs and themes.

More by The WordPress.com Team

%d bloggers like this: