How to create a WordPress Child Theme

The other day we talked about what is a WordPress Child Theme, and what are the advantages of using one. Now, let’s learn about how to create a WordPress Child Theme.

To create a WordPress Child Theme we have two ways: doing it manually (which is not as difficult as you might think), and automatically (using the plugin Child Theme Configurator). Let’s check both.

In our case, we’ll be using Astra theme, but the steps are the same for every theme.

Let’s get started.


Creating a WordPress Child Theme manually

1) Create a new folder to store your child theme

This folder can be named whatever you want. But I like to name it like my parent theme and add the “-child” suffix to the end of the folder name.

2) Create the basic child theme files

A child theme only need two basic files: style.css to add custom styles to our theme, and functions.php, to load these styles and add some other modifications to the theme, if needed.

Now that we’ve created the two basic files, we need to add some information inside them.

3) Adding the basic information to the style.css file

This file will contain the custom styles for our theme. However, this file must have a very special part at the very beginning called the theme file header. This section contains some information about our child theme, and the most important part, it indicates which is its parent theme.

You can use the following code as a template:

/*
Theme Name: <Your theme name> - Child
Template: <parent theme template name>
Author: <Your name>
Description: <A description for your child theme>
Version: <Your child theme version, could be 1.0.0>
*/

You can find information about all the fields that you can place in your style.css file here.

The most important and required part of this section are the Theme name and the Template fields. You must specify a Theme Name (it can be whatever you want, actually, but must be unique) and the Template which is the folder name of your parent theme.

As we can see in the first step the folder name of my parent theme is astra, so I will use it. Without a valid Template part, your child theme won’t know which theme it will inherit all its features from. So double check that you used the correct information.

This is what my child theme style.css file looks like:

4) Loading the styles with the functions.php file

This file is very important and useful because it will allow us, among other things, load our child theme styles.

For this, we will copy and paste the following snippet of code inside our functions.php file:

<?php
    
add_action( 'wp_enqueue_scripts', 'enqueue_styles_from_child' );

function enqueue_styles_from_child() {

	$parent_style = 'parent-style'; // Parent theme stylesheet handle, See note below

        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' )
	);
}

The previous snippet of code will load the parent theme styles and after that it will load the child theme styles, indicating that the parent styles are a dependency of the child styles.

A dependency? What does that mean? Why are we loading the parent’s styles again?

We are doing it this way so we can ensure that the parents styles are loaded before the child styles, so we can avoid styling errors due to the order of appearance of CSS rules.

Note: using this generic handler name for the parent stylesheet will cause your parent style to be loaded twice. Will this method work anyway? Yes it will, but it’s not efficient enough. Check this link in order to find out how to get the proper parent style handle. In my case the parent styles handler is called astra-theme-css.

5) Activating your child theme

That’s it! We are done setting up the child theme. Now we need to activate it.

To activate the Child Theme, in the WordPress dashboard, we need to go to Appearance > Themes, it should appear in the list of installed themes.

Before activating it, it’s recommended to use the Live Preview option first, to check that everything is working fine.

Everything is fine, so we can proceed to activate the Child Theme with the upper button Activate & Publish.


Creating a WordPress Child Theme using Child Theme Configurator plugin

First of all, we need to install the plugin. We can search and install it using the Plugin view of our WordPress dashboard. You just need to search “Child Theme Configurator“.

When we have finished installing and activating it, we can find it inside the Tools menu inside our WordPress dashboard.

Once we are inside the plugin interface, the steps to create a child theme are pretty straight forward. We need to select our parent theme from the list that appears there, and click the Analyze button.

When the analysis is finished, we are going to see a set of options. We will use the default options, except for a few ones:

In the option number 6, we are going to indicate that we want to Use the WordPress style queue.

We can customize the theme header comments if we want in the option number 7, but this is not necessary.

And finally, we should check the checkbox in the option number 8 if we have already customized our parent theme before, or if it is the first time we are creating the child theme for the first time.

When we are done with the options, we click the button Create New Child Theme at the bottom of the page.

And that’s it. We are done. If everything was successful, we will see a message like this:

Way faster than the manually process, uh?

Now that the child theme is created, we can preview it and activate it.

Summary

We saw how to create a WordPress Child Theme both manually, creating and editing the files ourselves or automatically using the Child Theme Configurator plugin.

Both methods are valid. Let’s see some pros and cons of each one:

Manual method

  • The process is a little bit longer.
  • Requires manual operation of the user.
  • Give us more freedom to choose what to do with our child theme.
  • Requires a little bit more of technical knowledge.
  • Doesn’t require the installation of any additional plugin.

Using Child Theme Configurator

  • Faster than the manual method.
  • Requires almost no technical knowledge, it’s better for beginner users.
  • Requires the installation of an extra plugin.
  • The final files generated might contain some extra code.

Which one to use is up to you!

Tell us, which method do you prefer and why?

Leave a Comment

Your email address will not be published. Required fields are marked *