A WordPress theme changes the design of your website.

When building or selecting a theme, you have many options to choose from. For example, your theme can have a one- or two-column layout. It can specify which devices or user actions make content visible. It can have custom typography and design elements. It can display content, including images and videos, anywhere you want.

But WordPress themes are not just about layout and typography. The best themes look beautiful and make your content more engaging for visitors.

To ensure you’re designing for the user experience, you might need to create a child theme. A child theme allows you to modify the appearance of your WordPress website without editing your theme files directly.

To understand why that’s valuable, it’s important to first understand the relationship between parent and child themes.

Grow Your Business With HubSpot's Tools for WordPress Websites

What is a parent theme and child theme in WordPress?

A parent theme is a complete theme. Meaning, it includes the WordPress template files and assets required for the theme to work. The index.php and the style.css files (the main template and style files, respectively) are the only required template files. However, most themes will also include PHP files, localization files, graphics, Javascript, and/or text files.

Similar to the relationship between a human child and parent, a child theme inherits the look, feel, and functions of the parent theme. But when you make modifications to the child theme, they are kept separate from the parent theme’s files. This is ideal for a few reasons.

First, and most importantly, it allows you to update the parent theme without losing your customizations. Without a child theme, you’d have to edit your theme files directly and any time you updated the theme, your customizations would be lost. As a result, you’d be faced with an impossible choice: either don’t keep your theme up to date, which is a huge security risk, or lose your customizations and the time you invested creating them.

The other two benefits to creating and customizing a child theme are related to the first. Keeping these modifications in a separate folder from your theme makes them easy to replicate or move from one site to the next.

It also enables you to start learning about and dabbling in theme development in a low-risk environment. If you begin customizing your child theme and something goes wrong or you aren’t satisfied, you can just disable the child theme. This will restore the parent theme and your website as it was.

Creating a child theme is not always the best option, however. If you’re mostly adding custom CSS, then creating a child theme is ideal. But if you’re making extensive customizations to the theme’s functionality, then you’ll be better off creating a parent theme.

Now that we understand the benefits of and ideal use cases for creating and customizing a child theme, let’s walk through the process below.  

How to Create a Child Theme in Wordpress, Step by Step

Creating a child theme in WordPress only takes a few steps. Below we’ll cover each one in depth so you can follow along. This demo will use the default WordPress theme Twenty Twenty as an example.

Step 1: Create a child theme folder.

First, you’ll want to create a folder where you can place all the template files and assets of your child theme. To create this folder, you’ll use File Manager in your WordPress hosting control panel.

User clicking file manager in cPanel of WordPress hosting provider

Image Source

Once you’ve opened File Manager, click the public_html folder. Then click the wp-content folder.

User navigating to wp-content folder in cPanel of a WordPress hosting provider

Image Source

Find the folder labelled “themes.” Then click +Folder from the toolbar at the top of the screen. 

Creating child theme folder in the cpanel of a WordPress hosting provider

Image Source

Name this folder using the parent theme’s name and add “-child” to the end. So if you were creating a child theme of Twenty Twenty, you’d name the folder “twentytwenty-child.”

This folder will be the directory for your child theme.

Step 2: Create a stylesheet for your child theme.

Next, you’ll need to create a stylesheet file to contain all of the CSS rules and declarations for your child theme. To do so, create a new text file and name it “style.css.”

You’ll have to add a required header comment at the very top of the file in order for the stylesheet to actually work. This comment contains basic info about the child theme, including that it is a child theme with a particular parent theme.

You really only need to include two things: the theme name and template (ie. the parent theme’s name). You can include other information, including a description, author name, version, and tags. These additional details are important if you’re going to publish or sell your child theme.

Here’s an example of a complete header comment for a TwentyTwenty child theme:

 
/*

 Theme Name:  Twenty Twenty

 Theme URI:        https://example.com/twenty-twenty-child/

 Description:  Twenty Twenty Child Theme

 Author:           Anna Fitzgerald

 Author URI:   https://example.com

 Template:         twentytwenty

 Version:          1.0.0

 License:          GNU General Public License v2 or later

 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 Tags:             two-column, responsive-layout

 Text Domain:  twentytwentychild

*/

Notice the slashes and asterisks. These signify that this code will be “commented out” in CSS so WordPress doesn’t try to execute it.

You can add custom CSS later when you’re ready to begin customizing your child theme. For now, click Save so this stylesheet will be saved in your child theme’s directory.

Step 3: Enqueue the parent and child themes’ stylesheets.

Now it’s time to enqueue your parent and child theme’s stylesheets. This will ensure two things: First, that the child theme inherits its parent theme’s styling so when you activate your child theme, you’re not just looking at a bunch of unstyled text.

Second, that the child theme’s stylesheet is loaded before the parent theme’s — without overriding it. That way, once you add custom CSS and otherwise modify your child theme, these modifications will augment or replace certain styles and functions of the parent theme.

To do so, create another file in your child theme’s directory. Name it “functions.php” and add the following code:

 
<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

?>

Step 4: Install and activate your child theme.

You install a child theme the same way you install any theme. You have two options: you can copy the folder to the site using FTP, or create and upload a zip file of the child theme folder.

To upload the file, go to your WordPress dashboard and click on Appearance > Themes > Upload. Then, choose your child theme’s directory

Upload Themes button in WordPress dashboard

Once it’s uploaded, click Activate.

Good news: your child theme is now live! The only problem is that it looks exactly like your parent theme. It’s time to customize.

Step 5: Customize your child theme.

To customize your child theme, you’ll likely start by adding CSS to the style.css file in your child theme’s directory. It’s one of the easiest ways to make changes to your theme. Whether you want to customize the color scheme, padding, typography, or other fundamental design elements of the parent theme, simply add code to your child theme’s stylesheet below the header comment. This code will override the code in your parent theme’s stylesheet.

To modify the functionality of the parent theme, on the other hand, you need to add functions to the functions.php file in your child theme’s directory.

For example, if you want to allow writers and other users to format their posts in different ways, then you can use the add_theme_support() function. To allow them to format posts as notes, links, a gallery of images, quotes, a single image, or video, then you’d add the following to your functions.php file in your child theme directory:

 
add_theme_support( 'post-formats',  array ( 'aside', 'gallery', 'quote', 'image', 'video' ) );

You can put as many or as few functions as you want between the opening and closing PHP tags of your file.

Create Your WordPress Child Theme

Installing a WordPress theme is a great first step in creating a WordPress website. To customize it, you can use the built-in Gutenberg editor or your theme builder (if it comes with one). But to go even further and customize not only its design but its functionality, you’ll want to create a child theme. 

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Oct 6, 2020 7:00:00 AM, updated October 06 2020

Topics:

WordPress Themes