1. Home
  2. /
  3. Website Design & Development
  4. /
  5. What is a WordPress...
What is a WordPress Child Theme – and How to Create One
September 20, 2023
6 min. read time

Having a theme is an essential part your WordPress website, but most don’t know that you should install a child theme as well. Before we tell you what a child theme is we should give some insight into how a theme works.

What is a WordPress theme?

A WordPress theme is a collection of files that make up your website – this can include stylesheets, templates, scripts, and more.

WordPress Themes Page

When the developers of a theme push out an update they send out the update package to all websites using that theme. The update package contains all of the theme files that are currently installed on your website, along with any new code added or removed from the update. When you update your theme you are replacing all of the current theme files with the theme files from the update package.

Why is this important? Well, sometimes you may need to directly edit your theme files to further customize your theme. When you update your theme your theme files are replaced by the new theme files in the update package, meaning that any custom code added to your theme files will be overridden and deleted when you update your theme.

How do you update a theme without overriding your customizations?

The answer: install a child theme on your website. A child theme is a duplicate package of your main theme. When your theme needs an update, only the files in the parent theme will be updated while the child theme remains untouched, meaning any customizations added to your child theme won’t be deleted.

Tip: You can either duplicate all of your theme files to add to your child theme or only copy the necessary files (style.css and functions.php) and the files you would like to edit.

For example, say you need to add custom code to your footer.php file. You would copy that file from your theme and paste it into your child theme folder. In this case you would only need the following files in your child theme:

  • Style.css
  • Functions.php
  • Footer.php
  • Screenshot.jpg

How do you create a child theme?

Creating a child theme may seem like a complex task, however, we can assure you it’s relatively simple.

Here’s how to create a child theme for any WordPress theme, in this case we’ll be creating a child theme for the Divi theme (with a free download available at the end of this article):

Step 1: Create a new folder for your child theme

This can be created on your local computer for now (we’ll show you how to add it to your website later on in this article). You should name this folder after your parent theme’s folder, with -child added at the end of it. So if you’re using the Divi theme the child theme’s folder should be called “divi-child”.

Child theme folder on mac

Step 2: Create the two necessary files for your child theme

Your child theme must contain at least these two files: style.css and functions.php – here’s how to create those.

Child theme folder on mac with style.css and functions.php

To create your style.css file open up a text editor on your computer (such as TextEdit on Mac or Notepad on Windows) and add the following code:

/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

Once the code is added you should edit a couple of things so it matches your theme. Here’s what each of these line items mean:

Theme Name: This is what you’ll be calling your child theme (and how it will appear on your themes page)

Theme URI: This is where the main theme code/documentation lives

Description: This is just a description of the theme for visitors to learn more about it

Author: This would be your company or website name

Author URI: Similar to the Author, this would your website link

Template: This is the folder of the parent theme. Note: you’ll need to use the actual folder name, not the theme name

Version: The version number of your child theme. This typically isn’t relevant, so you can just add 1.0.0 like we did

Theme Customization Starts Here: After the asterisk and forward slash (*/) is where you would add custom CSS

Tip: If you see a combination of an asterisk and a forward slash, these are for adding comments to CSS so that code/text is not executed. CSS comments will start with /* and then end with */

When you’re done, be sure to save the file as style.css.

After the style.css file you’ll need to create a functions.php file, which enqueues the stylesheet from your parent theme so your website has styling. As you did for your style.css file you’ll need to create a new file in your text editor. Once the file is created add the following code:

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

You really don’t need to edit anything here as the code will enqueue the parent theme’s stylesheet out of the box. Once the code is added, save the file as functions.php.

Tip: Both of these files will need to sue the exact names we mentioned. The style.css file will absolutely need to be called that while the functions.php file will need to be called exactly that.

Step 3: Add a theme image

You’ll want to include a theme image in your child theme folder so you have a way to identify it and so it’s not left blank.

Child theme in WordPress Themes page

You can do either one of two things, copy the theme image from your parent theme folder or create a new image to add. In the Divi theme files it’s called screenshot.jpg. If you add your own we recommend the file being 880×660 pixels in size and that it’s called screenshot.png (it can be either a .png or .jpg).

Child theme folder on mac with style.css, functions.php, and screenshot.jpg

Step 4: Add any files you would like to edit to your child theme

Now that you have the necessary child theme files you can add any theme files you would like to customize. When adding these files, you’re duplicating them from your parent theme, including the file name, file code, and file path. Here are a couple of examples:

Example 1: Say you want to add the header.php file to your child theme. You’ll want to either create a new file with the exact same name (header.php) or copy/paste it from your parent theme. The content within the file will need to be exactly the same as well, so if you create a new file rather than duplicating a file be sure to open the file from the parent theme, copy everything within the file, then paste it into your new child theme file. Since header.php is found in the main theme folder you can place it directly within your child theme folder.

Child theme folder on mac with style.css, functions.php, screenshot.jpg, and header.php

Example 2: If you need to add a file that’s within a sub-folder of the parent theme you’ll need to make sure you copy the whole path of the file. Say that you want to add the navigation.php file from the parent Divi theme. This is found within a sub-folder of the parent theme folder called “includes” so the path looks like Divi (parent theme folder) > includes (subfolder) > navigation.php. With that said, to add this file to your child theme you’d need to create a sub-folder called “includes” where you would then add the navigation.php file.

Tip: You won’t need to add all of the files from a subfolder if you’re adding a file from it. You will only need to add the files that you would like to modify.

Child theme folder on mac with style.css, functions.php, screenshot.jpg, header.php, and navigation.php

Step 5: Compress your child theme

Once you have all of your necessary and desired files to your child theme folder you will need to compress it into a .zip folder so you can upload it to your website.

Compressing Child theme folder on mac

Step 6: Add the child theme to your WordPress website and activate it

Now that your files are added to your child theme folder and it’s been compressed you’re ready to add it to your website! To add your child theme to your website head to the backed of your WordPress website > look for the Appearance tab > click themes.

Uploading theme in WordPress

From here, click add new > upload theme > browse. Select your compressed child theme folder and then upload it to your website.

Uploading theme in WordPress

Once uploaded, go ahead and activate your theme – that’s it.

Tip: Before you add your child theme to your website you will need to have your parent theme installed first. Out of the two themes, the child theme will become your active theme so no need to activate the parent theme.

Uploading theme in WordPress

What now after the child theme is added? Once your child theme has been added and activated you can start modifying its files. You can do this directly through the theme file editor in WordPress, in your website hosting file editor, or through a text editor on your computer (where you would then upload the file to your website host via the file editor or FTP).

On a similar note, if you would like to add more files to your child theme after its been uploaded you will need to upload the file through the file editor or through FTP.

Congrats – you’ve just created your very own child theme 🙌

Want to download a Divi child theme for free? Just click this link to save our Divi child theme that we use: Download our Divi Child Theme.

Level Up Your WordPress Game

Easy-to-digest articles for WordPress users by WordPress users, directly to your inbox.