How to Create a WordPress Child Theme

A child theme in WordPress inherits the functionality and styling of another theme, called the parent theme. Child themes are recommended to modify existing themes while still maintaining their design and coding. Here’s how you can create a WordPress child theme.

Step 1: Create a Theme Directory

A child theme needs its own directory in your site’s wp-content/themes directory. Connect to your site via FTP and navigate to this directory. Create a new directory with a name of your choice. It’s a good practice to use the name of the parent theme with ‘-child’ appended to it.

For example, if you’re creating a child theme of the Twenty Twenty-One theme, you might call your directory ‘twentytwentyone-child’.

Step 2: Create a style.css File

Next, you’ll need to create a new CSS file in your child theme’s directory. This file will hold all of the CSS rules and declarations that control the look of your theme. Here’s a sample of what the beginning of your style.css file might look like:

/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:    http://example.com/twentytwentyone-child/
 Description:  Twenty Twenty-One Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentytwentyone
 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:  twentytwentyone-child
*/

The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Twenty-One theme, so the Template will be twentytwentyone.

Step 3: Import Parent Theme Styles

To inherit the parent theme’s styles, add the following to your child theme’s style.css file:

@import url("../twentytwentyone/style.css");

Step 4: Create a functions.php File

Your child theme also needs a functions.php file. This file works like your theme’s plugin, and it’s where you can add your own custom functions. In this file, enqueue the parent and child theme stylesheets.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
   wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}

Step 5: Activate Your Child Theme

Log in to your WordPress dashboard, go to Appearance > Themes. You should see your child theme listed. Click Activate.

Conclusion

Creating a child theme in WordPress allows you to make modifications to your site without altering the parent theme’s code, making it easier to update your site and prevent loss of customisation. Now you can modify your site knowing that your changes are safe!