graphic showing building websites plus cover standard

A Child Theme in WordPress: Why and How

A WordPress child theme is like an onion skin tracing of your main theme. It’s not that you have to have a ‘main theme’, a child theme is the same for any theme. But we’ll use ‘main theme’ because if you’re looking for information about a child theme, you’ve probably found a theme you call your main theme. But you want to tweek it somewhere.

More to the point, you’re probably thinking about making changes to your main theme but worry about blowing it up and destroying your WordPress website. Shielding you from this tragic happening is exactly the purpose of a child theme.

Simply put, you can make any change you want to a child theme and not blow up the main, or underlying theme. Underlying, like onion skin tracing, is an apt analogy. You see, if you had a drawing you wanted to change without destroying the original, you would lay it under onion skin tracing paper and trace it.

Once traced, you could make any changes you like to your trace copy with no worry about destroying the original. In the same way, a child theme is the onion skin tracing of its underlying theme.

Validating a Child Theme

A WordPress child theme needs only two files to be valid: The child theme’s style.css file, and the child theme’s function.php file.

The WordPress child theme is valid for WordPress when each of these files contains just a small amount of information.

Specifically the style.css file needs only a properly formatted header describing itself and what theme it is a child of. And the functions.php file that needs only a few lines of code to attach, or enque, the main theme’s style.css.

Once these are created and formatted correctly, you can install them and literally change any element of the main theme with your child theme. You will not have to worry about blowing up your main theme.

Make the Child Theme Style.css and Functions.php

First, grab a suitable code editor if you don’t already have one. Visual Studio Code is a good one. Then add this code and save it as style.css.

/*
Theme Name: c_twentytwenty
Theme URI: https://buildingwebsitesplus.com
Description: A child theme for Chaplin.
Author: Building Websites Plus
Author URI: https://buildingwebsitesplus.com/
Template: twentytwenty
Version:1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Looking at the above lines of code, note that critical components are theme name and template. Get those incorrect and your template won’t be valid. You’ll still see the broken template on the install themes page with an error message after you load up the .zip file.

Now, let’s make the functions.php file. Make a file called functions.php in your editor and add code described below.

<?php
/* enqueue scripts and style from parent theme */        
function c_twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', c_'twentytwenty_styles');

Notice functions.php has an opening <?php but no closing ?>. That’s correct. In fact if you add the closing ?> it won’t work.

Create and name a folder. As good practice you should name this folder something meaningful to the parent theme. I usually prepend the parent theme name with a simple c_twentytwenty in this case. Save the above styles.css and functions.php into the named folder and create a .zip of it.

Now, you can upload your new child theme to your wordpress theme page and activate it.

Install and Use a Child Theme in WordPress

You activate a child theme just like any other theme. Upload the zip file and click activate. 

Even if you have done no customizations with it at all. WordPress sees this as the active theme and  looks for .php file instructions. WordPress will use any same named file you create in your child theme in place of the same named file in the main theme directory.

For example, every theme has a file called index.php. You can see this file for yourself by finding the wp-content/themes/[main theme name] directory on your host server and opening the themes directory. Now find the folder with the name of your main theme. Open that and you’ll find the index.php file for your main theme.

When WordPress fetches data like in our index.php example, the data fetched is all blog posts. WordPress sends all blog posts to the browser based on the instructions found in index.php. That’s what index.php does.

But if you have installed and activated a child theme, WordPress uses that child theme folder for gathering .php instructions. Any file you modify and place in this directory on the server will be used to send display instructions to a browser.

If, for example in our index.php case, there is a child theme installed and activated, and that child theme folder on the server contains an index.php, WordPress will use the child index.php disregarding the index.php in the main theme’s wp-content/themes folder. 

If in our example, on the other hand you have a child theme activated and it does not have an index.php, WordPress uses the index.php found in the main theme folder. 

Benefits of Using a Child Theme in WordPress

Once the child theme is active on your WordPress installation, you can now create any code you like within the child theme folder. If it blows up your installation, no worry, you did not destroy the master.

For example, let’s say you wanted to change the way blog posts are displayed on the blog page. You would simply copy the index.php from your main theme and put it into the directory of your new child theme.

Now, make any changes you like to the child theme index.php and they will be used in the browser rather than the main theme’s index.php.

In the same way, any changes you make to the style.css will replace the same named style function in the main theme’s style.css file. 

Sometimes people wonder why make a child theme at all? Why not just make a copy of the theme’s main files and edit the theme directly.

The answer is simple. Every time you update your main theme, any changes you have made to it will be overwritten. By using a child theme the update won’t overwrite your improvements. If you review the update changes and determine they affect your child template somehow you can implement the changes there manually.

By keeping the child theme like an onion skin tracing of your main theme you open up infinite ways to change your main theme design with no the need to create a new theme from scratch.

Leave a Reply