To create a child theme in WordPress

October 01, 2022

This write-up is to cover the very basics needed to have a child theme for testing, not instructions to create a full child theme for selling or white labeling for a client.
You can get more in-depth information here:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
For the testing I would suggest creating your site locally, instructions can be found here or doing an internet search:
https://www.lynnamacher.com/setup-wordpress-for-local-testing/

The purpose of a child theme is when you’re going to need to make coding changes or updates to the site but don’t want to lose those changes when the theme is updated. When you need to make changes to the site such as adding CSS or change PHP files, you’ll want to use a child theme. If you don’t use a child them when an update to the theme comes out it overrides the code that you added to the site with the new updated version.

Go to the ‘themes’ folder: YourSite > wp-content > themes
Create a new folder, any name you like; for better organizing give it the same as your theme with ‘child’ at the end.
Create a ‘style.css’ and a ‘functions.php’ file in that folder.
Inside style.css:
change ‘Twenty Twenty Two’ with your theme name, add child to the end:
Some themes need the child themes setup in a special way.
((remove the internal comments ( /* */ ) but keep the ones at the top and bottom.

/*
 Theme Name:   Twenty Twenty Two Child
Description:  Child Theme for Twenty Twenty Two /*Might be optional depending on theme*/
Author:       John Doe /*This is optional */
 Author URI:   http://example.com /*This is optional */
 Template:     twentytwentytwo /*the name of the template, copy and paste from folder*/
 Version:      1.0.0 /*This is optional but good if you want to keep track of your version changes*/
Text Domain:  twentytwentytwochild   /*This is needed for wordpress.com*/
*/

Theme name has to be unique, you can’t have 2 themes with same name, in the folder. WordPress will read what the parent theme is and will load any elements that the child doesn’t have included.

In the functions.php file add this code (if this doesn’t work go to the wp dev site above for a version of the code for those themes that don’t support this method.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

To check to make sure your code is getting picked up in the child function you can add this to the bottom of the function and the version number will show at the top of the page.

$theme_version = wp_get_theme()->get( 'Version' );
echo $theme_version;

You can think of both the CSS and Functions.php files like you would for CSS, the child theme is the same as inline CSS and will override that of the parent. This is what will allow you to update the theme without having to go through and create a theme.

When doing a child theme for a new theme it’s always best to try it out with a local install then zip that file and upload it to the main site. There’s always chances that something could go wrong and it’s easier and quicker to fix locally.

Related Articles

Setup WordPress for local testing

Setup WordPress for local testing

If you’re getting started with WordPress or needing to test out themes, plug-ins or code, doing a local install is the best way to practice and test without worrying about altering your live site. Or if you want to work on WordPress sites when you don’t have internet...

read more
Moving WordPress to new limited server – Working notes

Moving WordPress to new limited server – Working notes

These are quick instructions written, mostly for me. But somebody with a more than basic understanding of how WordPress works and that knows basic trouble shooting should be able to follow along. If you’re not fully comfortable with WordPress it’s advised to contact...

read more
Cloud Computing

Cloud Computing

As we seen in the above cartoon there can be some confusion over what is ‘the cloud’ and how it works. Such as how Bob, the slightly balding manager in the cartoon, thought the data was up in an actual cloud. I’ve wrote up a basic description of what is ‘the cloud’....

read more

Pin It on Pinterest

Share This