We use child themes because they allow us to make changes to any feature of the theme, but these changes will be retained when the main (parent) theme is updated because we have our code in a separate folder.
All themes written in 2017 and most of 2016 should also abide by the standards that would allow this child theme structure to work. Unfortunately, there are still many not keeping up with the standard and developments of WordPress.
The most simple child theme possible has two files and with just a few lines of code. A style.css and a functions.php.
Style.css
This file has a special use, it is not only where you would expect the main CSS style changes to be included, but it has a special header which is what allows WordPress to recognise and know about the theme. All themes have such a header.
/* Theme Name: Twenty Seventeen Child Theme Theme URI: https://mywebsite.com Author: Your Name Author URI: https://mywebsite.com Template: twentyseventeen Description: Child theme for Twenty Seventeen. Version: 0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Text Domain: twentyseventeen-child */
The main features for us are that the template entry refers to the name of the main parent theme this works with.That entry defines this as a child theme. The name of the theme will be used to refer to it and the text domain is for use in translations of the theme. These should be unique. The version number will be used if this theme will update. The other information will be shown when you look at the theme information.
Functions.php
This will hold code to assist with the theme setup. For a child theme of twentyseventeen, you have the option of defining all the styles yourself from scratch and putting them in the style.css, (in which case you may just want to copy the parent theme style.css and start from there,) but a more prudent route is to add code to refer to the parent style.css and then you can just add any exceptions and changes in your style.css. To do this the following code is added to the functions.php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Download a copy of twentyseventeen-child theme here
How a child theme works
In simple terms, WordPress will always look first in the child theme for any page content. If none is found then it will use whatever is available in the parent theme. So if WordPress wants to load a page.php, it will look for one in the child theme first. This means we can replace any file in the theme just by adding it to the child theme. A very simple system,
Style.css
The style.css file will only be used if it is called into action. In the twentyseventeen theme, the functions.php correctly call the stylesheet URL (stylesheet directory) of the style.css theme. This means it will load the parent style.css if no child theme is being used, and the child theme style.css if a child theme is in operation.
That is why we have to request the parent theme style.css if we want to use it with the child theme.
Functions.php
These work slightly differently. The child theme functions.php is always called first, and then the parent theme functions.php
Screenshot
You may notice that the theme does not have a screenshot in the themes list. You can make an image, size is now 1200px wide by 900px. Ignore smaller sizes in other posts, they are out of date. This then sits in the child theme folder with the style.css and functions.php. We have included the twentyseventeen screenshot in our download for you.
