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 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.