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

Website Contact form using AWS

Website Contact form using AWS

For the next iteration of the HTML form was to set it up to send an email to the web owner using AWS. The purpose behind this is, if you have a HTML site and don’t want to purchase a monthly plan or build and maintain server software. Using AWS for this functionality...

read more
HTML with JavaScript contact form

HTML with JavaScript contact form

Link to the form: https://www.lynnamacher.com/pdf/contactForm_V1.html This is created to be basic test for an AWS contact form test. The full form when filled out will send an email through AWS to the site owner. Instead of creating the normal test form I try to...

read more
Save Illustrator for SVG to use in HTML page

Save Illustrator for SVG to use in HTML page

When working with the AWS contact form, I had created a graphic in Illustrator. You can see the post here. With this test form I wanted to have everything in one HTML file this way it’s just one file to upload and update when needed without making sure the other files...

read more

Pin It on Pinterest

Share This