Advertisement
  1. Web Design
  2. WordPress

How to Make a Child Theme in WordPress

by
Difficulty:BeginnerLength:MediumLanguages:

The process behind how to create a child theme for WordPress can at first seem like information overload, especially if you are new to developing for WordPress.

It’s not uncommon to find highly detailed tutorials on WordPress child theme development that diligently inform you of all the things you can do. However, if you are coming to this process fairly fresh and without extensive background knowledge and context, it can be hard to discern the difference between essential steps, best practices and optional extras.

child theme

So instead of running you through all the hundreds of things you can do when you create a child theme for WordPress, we’re going to start by outlining the 5 steps you must do. Everything after these 5 steps is gravy.

We will expand on these steps with more information on best practices and optional extras, but let’s start by keeping things in their simplest possible form.

Premium WordPress Themes and Plugins 

Before we start, don’t forget you can explore the thousands of WordPress themes on ThemeForest and WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes (extend them with a child theme?) and plugins and improve your website experience for you and your visitors. 

WordPress themes on Themeforest.

The 5 Essential Steps to Make WordPress Child Theme

Step 1: Make a Folder

Create and name an empty folder in the wp-content/themes folder of your WordPress installation.

Step 2: Make Two Files

Create the files “style.css” and “functions.php”.

Step 3: Define the Child Theme’s Name and Specify its Parent Template

In the "style.css" file add a comment, then within it define the name of your child theme, and specify the directory of its parent theme like so:

Step 4: Load Parent Styles

In the "functions.php" file add the code:

Step 5: Activate

Activate your child theme via your WordPress admin panel and, as long as the parent stylesheet is loaded correctly, your site will look just like it did with the parent theme active.

That’s it, that’s all the essentials behind how to make a child theme in WordPress. Now let’s look at a little more detail, and add some best practices and optional extras.

Create a Child Theme in WordPress: More Detail

Confirming the Parent Theme Directory Name

Usually the parent theme’s directory name matches its name, but you still need to make sure you get the directory name exactly correct, in particular including or excluding hyphens accurately.

So when you are in the wp-content/themes directory setting up your child theme, take a moment to identify the parent theme directory and note down its exact name.

Name Your Directory "parentname-child"

Technically you can name your child theme‘s directory anything you like, but it’s considered best practice to append "-child" to the directory name of the parent in order to make the relationship between the parent and child clear.

Add More Info to the "style.css” File

As well as the essential information you already added you have the option to add a bunch of extra information to the "style.css” that will show up in the theme’s listing in the admin panel.

child theme information

The extra info is mostly for the benefit of others, so whether you should add it or not depends mostly on if you plan to share your child theme.

Confirming the Parent Theme Stylesheet location

Usually the parent theme’s main stylesheet will be "style.css", located in the root directory, but that’s not always the case. If the parent stylesheet has a different, non-standard name and / or location you’ll need to use that information instead when loading parent styles via your child theme’s "functions.php" file.

If you find your child theme initially has no styling at all, and you’re sure your style enqueueing code is correct, you should check on the name and location of the parent stylesheet.

We already covered how to identify a theme’s stylesheet in our article How to Customize a WordPress Theme With CSS, so take a look at that to learn how to do so through either:

  1. Inspecting <head> code
  2. Checking the "functions.php" file.

Look Up the Parent Theme Handle

You will have noticed that when we enqueued the parent stylesheet we used the variable $parenthandle, which had the placeholder value of 'parent-handle'.

This handle is an identifier for the parent stylesheet that was specified by its developer when they wrote the wp_enqueue_style() code to load it up, and it helps WordPress differentiate between one stylesheet and another. For the sake of consistency it’s a good idea to use the correct parent stylesheet handle when you enqueue that stylesheet yourself.

You can look up this handle using a variation of the two techniques referred to above for identifying a parent theme’s stylesheet location, namely inspecting <head> code or checking the "functions.php" file.

With the parent theme active, looking in your site’s <head> section, you will see the stylesheet handle in the id property of the related <link> element, with -css appended to it.

For example, the below element shows this stylesheet has the handle twentytwenty-style:

Or, if looking at the related wp_enqueue_style() function in the parent "functions.php" file, you will see the handle specified as the first parameter between the parenthesis.

How to Make Customizations via a WordPress Child Theme

The whole point of creating a child theme in WordPress is so you can customize the design of the parent without directly touching it. So now let’s learn the main ways you can make those customizations.

Our focus will be on CSS and template overrides, given they are the main two vehicles for design customization.

Overriding Parent CSS

You already loaded the parent’s stylesheet during the essential steps and, in order to have a way to bring in your own CSS, you now also need to load your child theme’s stylesheet.

You can do this by using the wp_enqueue_style() function again with this line of code:

Add it to your existing "functions.php" code at the end of the enqueue_parent_styles() function like so:

You can now add any custom CSS you like to your child theme’s "style.css" file, overriding any of the parent styles you want to change.

Take a look at our article "How to Customize a WordPress Theme With CSS" to learn how to identify which CSS styles to target for the changes you want to make.

Overriding Parent Templates

Overriding templates from the parent theme is super straight forward. It’s just 2 steps:

  1. Copy and paste a template from the parent theme into your child theme, making sure you mirror the parent theme’s directory structure if copying from a sub-directory
  2. Open the duplicated file and edit it as you please

Any changes you make in the duplicated template will now automatically show up on your site.

Adding Custom Template Files

WordPress uses its template hierarchy system to decide which template to use when a visitor is on different parts of your site, and it always looks for the required template file in the child theme first.

This means if you want to add a template file that isn’t already in the parent theme, you can just add it directly to your child theme. As long as you follow the rules laid out by the template hierarchy it will be loaded automat really with no extra steps required.

For example, let’s say you want to use a custom template for a category on your site named "Portfolio", so you can give it a unique layout.

You could add a template named "category-portfolio.php" to your child theme, add your custom layout to it, and it will automatically be loaded any time someone visits the "Portfolio" category.

Bonus: Add a Theme Screenshot

Once you have your child theme looking the way you want, you can take a screenshot, resize it to 1200px wide by 900px tall, and save it as “screenshot.png” into the root directory of your child theme. The screenshot will then appear in your theme’s listing in the admin area.

Wrapping Up

So that’s it, that’s all the critical information behind how to create a child theme in WordPress.

It doesn’t have to be complicated. Just do the essential steps first, add whatever optional extras you like, then customize away.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.