Creating a child theme

A child theme is basically a subversion of a WordPress theme. We can use a child theme to override the styles, templates, and functionality of a given theme without breaking the changes on theme upgrades. The functionality of a child theme can range from minor style changes to complete template changes. It's important to create a child theme for each and every theme we use to make and track changes.

In this recipe, we are going to look at the process of creating a simple child theme.

Getting ready

Open the code editor and make sure that you have access to the theme files in your local or external WordPress installation. We will be using the Twenty Twenty theme as the parent theme for creating the child theme.

How to do it...

Follow these steps to create a child theme for the Twenty Twenty theme:

1. Open the wp-content/themes folder of your WordPress installation and create a new folder called twentytwentychild.
2. Create a new file called style.css inside the twentytwentychild folder.
3. Open the style.css file, add the following code to define it as a theme, and save the file:

/*
Theme Name: Twenty Twenty Child 
Theme URL:
Description: Twenty Twenty ChildTheme
Author: John Doe
Author URL:
Template: twentytwenty
Version: 1.0.0
Text Domain: twentytwenty-child
*/

4. Create a new file called functions.php inside the twentytwentychild folder.

5. Add the following code to the functions.php file in order to include the stylesheet of the parent theme and save the file:

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

6. Log in to the WordPress Dashboard as an administrator.
7. Click the Appearance menu.
8. Click the Themes option. Now, your theme will appear in the list, as shown in the following screenshot:

9. Click the Activate button to activate the theme.

Now, you can visit the home page of the site and the child theme will be displayed. However, you will not see any differences compared to the Twenty Twenty theme as we didn't change any styles or templates.

How it works...

The themes are loaded from the wp-content/themes folder. WordPress will look for style.css files inside the themes folder with the predefined comments we added in step 3. Once we add the style.css file with predefined comments inside the twentytwentychild folder, it will show up in the themes list in the Appearance | Themes section. Let's take a look at the code in step 3 and identify how it works.

First, we have to define the Theme Name and Theme URL. We need to use a unique name for the Theme Name option, whereas the Theme URL is an optional external URL that contains details of the theme. Then, we have the description and author information. These fields are also optional, so we can decide to add them or keep them blank.

Next, we have to define the Template field (which is a mandatory field when identifying a child theme). This should be the folder name of the parent theme. Then, we have the Version and Text Domain fields. We can define the theme version for the Version field and a unique slug for the Text Domain field, which will be used for translations.

After adding this comment in style.css, the theme will start showing on the theme list. However, the site will display without any styles, even after activating the theme at this stage. So, we need to include the style.css file of the parent by using the code in step 5. This code enqueues the style.css file of the parent theme when loading the site.

Now, the site will start displaying the styles of the parent theme. At this stage, there is no difference in the design or functionality of the child theme compared to the parent theme.

There's more...

In this recipe, we created a child theme for the Twenty Twenty theme. However, no functionality is provided by the child theme at this stage. We can use a child theme to add custom styles and change the functionality of a parent theme. In this section, we are going to look at the process of adding custom styles with a child theme.

First, we have to add the necessary styles to the style.css file of our child theme inside the twentytwentychild folder. Let's use the following CSS to change the color of the theme header:

#site-header {
 background: #21c7d8;
}

Now, you can check the home page of the site. At this stage, the style change we made is not visible on the site header. The reason for this is that we only included the parent theme's style.css file in the functions.php file of the child theme. First, remove the existing code in functions.php file. Then, include the child theme's style.css file along with the parent theme's CSS file by adding the following code to the functions.php file:

add_action( 'wp_enqueue_scripts', 'wpccp_chapter2_enqueue_parent_styles' );
function wpccp_chapter2_enqueue_parent_styles() {
 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' )
 );
}

We already used the first wp_enqueue_style function to include the parent theme styles. The parent-style key can be changed to any unique name. The next line enqueues the child theme's style.css file with a dependency on parent theme styles. The get_template_directory_uri and get_stylesheet_directory_uri functions load the main theme directory and child theme directory paths. Now, you can visit the site and the changes in the header styles will be visible with the color we added.

If you aren't seeing the background color we added to the CSS file of the child theme, make sure to clear the browser cache and refresh the browser multiple times.

Before moving into the next recipe, remove or comment the CSS code added in the style.css file of the child theme.