Wordpress Child-Themes
If you don't happen to just build your own Wordpress theme completely on your own, you probably at some point have edited the files of a downloaded third-party theme. And then realized when one day your own changes are irretrievably overwritten. Because themes, like plugins, are also subject to an update cycle. But at the same time, you don't want to deactivate the updates for security reasons.
The solution: a so-called Wordpress child theme.
So what exactly is a Child Theme?
A Wordpress child theme is technically a separate theme in the theme folder of the Wordpress installation, which inherits the design and templates of another (parent) theme — as long as these files do not exist in the child theme folder.
Creating a child theme is surprisingly easy and does not require any programming knowledge to set up initially. Strangely enough, the registration of a theme is done solely on the basis of a CSS file.
Anatomy of a Child-Theme
Let's assume we want to edit the Wordpress standard theme "Twenty Twenty", and we do this the proper way by creating a child theme for it. To achieve this, create a new folder inside the theme folder of your WordPress installation with the name (for example) "mychildtheme".
The minimum requirements for a child theme are the following files:
- index.php
- functions.php
- style.css
The easiest way is to copy the index.php from the parent theme. Then create an empty style.css and functions.php file in the same folder.
style.css
/*
Theme Name: My Twenty Twenty Child-Theme
Text Domain: mychildtheme
Template: twentytwenty
Version: 1.0.0
Description: This is my first ever child theme, based on the standard theme Twenty-Twenty
Author: Your name
Author URI: https://your-website.com/
*/
Fig. 2: Content of a simple style.css
The theme name is the name of your theme. This can be chosen freely. Also the text domain; but you should only choose a short name of lowercase letters. The specification of a template is the difference to a regular Wordpress (parent) theme. As a value you enter the text domain of the parent theme. In this case it's twentytwenty. You will find the correct wording in the style.css of the respective theme.
functions.php
<?php
/**
* My Child Theme functions.php
*
*/
//Register and Enqueue Styles.
function mychildtheme_register_styles() {
$theme_version = wp_get_theme()->get( 'Version' );
wp_enqueue_style( 'twentytwenty-style', get_template_directory_uri() . '/style.css', array(), $theme_version );
wp_enqueue_style( 'my-style', get_stylesheet_directory() . '/style.css', array(), $theme_version );
}
add_action( 'wp_enqueue_scripts', 'mychildtheme_register_styles' );
Fig. 3: Content of functions.php
The unique feature about the functions.php is that both versions - the functions.php of the parent theme, as well as yours in the child theme are loaded. This info is important when creating new functions, because they must not have the same name, otherwise there will be ugly PHP errors, or the loading of your page will be prevented. Best practise would be to prefix everything in your own theme.
If you have already tried to activate the child theme out of curiosity, you will have noticed that the page is displayed without a real design. In order to display the page correctly, we need to include the stylesheet of the parent theme as well. The proper way to do this is to use the function wp_enqueue_style(), see Fig. 3.
When specifying the path to the stylesheet you have to use get_template_directory_uri() to end up in the folder of the parent theme.
Last step: Activating your theme
Where do we go from here?
From this point onward you can add and change files in your own theme folder as you like, without losing these changes in the next (automatic) update cycle of the parent theme.
If you want to create your own header (header.php) or change the template for the blog archive (archive.php), copy the corresponding file from the parent theme into the child theme folder and make your changes there. From that moment, your own file will be loaded and not the one of the parent theme, and all of your changes will persist after updates to the parent theme.
Happy Coding.
Got beef?
Comments for this entry have not been activated.
Comments to this post