Creating a child theme

I will show how to create a child theme and why we use it.

We mainly create a child theme to avoid the theme being overwritten when the parent theme is updated.
I will be using information from the WordPress Theme Handbook Child themes section.

The Parent theme

A parent theme contains all the required WordPress template files and assets for the theme to work.

The Child theme

A child theme can be used to modify the appearance and functionality of the parent theme. Any modifications added to the child theme will either overwrite or add on to the parent theme code. The bonus of keeping modifications separate from the parent theme’s files is when the parent theme is updated it will not affect the child theme files.

How to create a child theme.

We need these files to create a child theme:

style.css
functions.php
screenshot.png (or screenshot.jpg) Creating an image is optional but helpful to include.

Create a new folder in the themes directory, located in wp-content/themes.

Best practice is to name the folder after the parent theme and appending -child. Example.
Creating a child theme for the theme twentytwentyone. One would name the new child folder:
twentytwentyone-child.

Creating a stylesheet: style.css

You need to create a new style.css and added it to the child theme folder. Here is a full example based on the above twentytwentyone parent theme.

/*
 Theme Name:   Twenty Twenty One Child
 Theme URI:    http://awebsite.com/twenty-fifteen-child/
 Description:  Twenty Twenty One Child Theme
 Author:       My name
 Author URI:   http://awebsite.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:  twentytwentyonechild
*/

There are just a few fields that are required, so that you do not need to add all of the above information. Here is a much lighter version which adds the “Theme Name” and the “Template”. Theme Name is the child theme name. Template is the parent folder name. I also added the comment “Add your CSS modifications below here.” text.

/*
 Theme Name:   Twenty Twenty One Child
 Template:     twentytwentyone
*/

/* ----- Add your CSS modifications below here. -----*/

Creating a functions file

We now need to create the functions.php file. The file will be located inside the child theme folder. Here is one example of the code inside the functions.php 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' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}

// Add your code modifications below here.

Creating a screenshot for the child theme

The recommended image size is 1200px wide by 900px tall. The image is usually saved as a PNG file, but a JPG will also work. Add the image to the child theme folder. The image needs to have the name: screenshot.

The files inside the child theme

Folder name twentytwentyone-child and inside the folder we have functions.php, a screenshot.jpg and style.css files.

Adding additional files

We might need additional files from the parent theme. Recreate the same folder structure as seen in the parent theme into the child theme and duplicate the parent theme files into the correct location.