Creating a child theme

Previously on the CogitActive Saga:
Twenty Seventeen is highly customizable and comes with improved child theme functionality. As such, it is a great theme for experimentation.

As explained in How did I choose my theme?, I decided to go with Twenty Seventeen for my website(s). Even though I really like this theme for its business-centric layout (among other things), I didn’t plan of using it exactly how its authors released it. Not only there are few things I don’t like about it (e.g. how it displays the Featured Image in single post and/or page), but also I wanted to customize every single aspect of my websites. I am not talking about personalizing their appearance via the Customizer nor performing “simple” CSS changes. Actually, I am aiming at more in-depth changes that require tinkering with the code.

Now, the #1 Rule of WordPress development is to never directly modify WordPress files¹; this includes theme files. Indeed, the recommended way – to customize a WordPress theme safely – is to use a child theme.

Child themes should always be used if you plan on modifying even a single character in your theme. There are two very good reasons: updates and organization.Daniel Pataki

Child themes 101

A theme, which controls the layout and design of your site, consists of a collection of template files and stylesheets, among other files. As explained in the codex, a child theme allows you to change small aspects of your site’s appearance yet still [preserving] your theme’s look and functionality².

What is a child theme?

A child theme is a separate theme that relies on a parent theme for most of its functionality. Specifically, it inherits the look and feel of the parent theme and all of its functions². In contrast to the latter, it doesn’t include all of the required WordPress template files and assets; yet, it requires the parent theme in order to work.

The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly.

Since the child theme overrides the parent theme³, it can be used to make modifications to any part of the theme. It can even add functionality to the parent theme. Similarly, it can have template files that are not even available in the parent theme. In short, a child theme allows a great deal of flexibility (from customization to extensibility) without writing a lot of code.

Why using a child theme?

Yes, why? After all, WordPress provides the theme editor tool to modify the code in a theme template or stylesheet file (see Multisite themes management). Why not to use it? First, the #1 Rule of WordPress development is to never directly modify WordPress files¹. Second, the changes made with the theme editor are instant (i.e. they happen online, in real-time) and if you introduce an error that crashes your site, you cannot fix it from here.

You should NOT be using the theme editor. If you edit theme files directly and make a mistake that cannot be undone, you are stuck with a broken theme.

Yet, there is another reason why you should not modify the original files of the theme: updates wipe out customization changes! If you are doing some adjustments to your theme’s code, your modifications will be overwritten with the next update. On the other hand, using a child theme lets you upgrade the parent theme without affecting the customizations you’ve made to your site². Why? Because, your customizations are kept separate from the parent theme’s files – that simple!

Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes.Nick Roach

What about the Additional CSS panel in the Theme Customizer then? This approach would indeed ensure that the modifications are preserved (when the theme files are updated). In fact, as nicely expounded by Jon Penland in Will You Still Need a Child Theme With WordPress 4.7?, if you only use a child theme to edit CSS (to make minor styling adjustments), this option might be a good alternative. However, this can’t be used to create page templates or write anything other than CSS.

Child themes are often used to customize or tweak an existing theme without losing the ability to upgrade that theme (see above). Nonetheless, they can also be a good approach when you need the functionality, features, and awesomeness of a powerful parent theme without writing much code for it yourself. Unassumingly, I aspire to create a custom theme based on Twenty Seventeen.

How to create a child theme?

There are many tutorials explaining the procedure. The problem is that many – supposedly updated⁴ – articles refer to an outdated method. As always, the recommend way to deal with anything WordPress-related is to trust the codex (i.e. the official documentation from wordpress.org) over any other sources of information.

Of course, I didn’t limit myself to one single source of information⁵ (no matter how reliable it is) and I dig for more resources. I want to mention two other articles that prove quite useful during the creation of my child theme:

Importantly, many sources explain that, in order to load the parent theme’s style.css file (so that it inherits the parent theme’s styling), you have to add this line of code to your style.css file: @import url(‘../twentyseventeen/style.css’);

This method is no longer the recommended practice². As explained in the codex, it is very inefficient¹ because it increases the amount of time it takes style sheets to load². Moreover, if you are using this approach, it is possible for the parent stylesheet to get included twice².

Any article (or book) showing this technique is outdated!

Time for Action

After going through the aforementioned articles (and many others), creating a child theme was relatively straightforward. It was essentially a four-step process. Yep, as compared to the three-step process generally described², there is a step 4 (described in the Child Themes (twentyseventeen) article¹) that brings a nice touch at the end.

Child theme folder

Like regular themes, a child theme needs to reside in a directory (or folder) inside the /wp-content/themes directory. The first step in creating a child theme is therefore to add the directory that will hold it.

As for the creation of WordPress Multisite, I opted to use File Manager to edit folders and upload files on the server. I accessed my cPanel, clicked on the File Manager icon (located in the Files section), selected the Document Root (i.e. public_html) and clicked Go. Once in the public_html directory, I navigated (by double clicking) to /wp_content and then to /themes. Once in the /theme folder, I clicked on the New Folder button to do exactly that – add a new folder.

Importantly, the folder name should be all lowercase with no spaces¹. In addition, it’s best practice to give a child theme the same name as the parent, but with -child appended to the end². In spite of this latter guidance, I set the name of my child theme folder to twentyseventeenchild.

Stylesheet

Each theme comes with a stylesheet, which contains all of the CSS rules and declarations that control the look of the theme. Child themes are no exception. In fact, the only required child theme file is style.css. The latter must contain a required header comment at the very top of the file², which tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent².

Admittedly, I could have created my style.css file directly within File Manager, but I didn’t. Instead, I opened Notepad, copied and pasted the code from the codex², and adjusted the values accordingly:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    https://wordpress.org/themes/twentyseventeen/
 Description:  Twenty Seventeen Child Theme for CogitActive
 Author:       Alexandre Seillier
 Author URI:   https://cogitactive.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  twenty-seventeen-child
*/

Note that the only required items are Theme Name, which needs to be unique to your theme, and Template (the name of the parent theme directory). The other items are used by WordPress to display information about the theme in the Appearance > Themes menu.

While it was a no-brainer to replace every occurrence of “Twenty Fifteen” (from the codex example) by “Twenty Seventeen”, or to provide a Description, Author, Author URI and Version (written in x.x or x.x.x format), I had some difficulties to figure out the others. For some, I looked at the style.css file of the parent theme and simply copy-pasted the info from there (including for the Theme URI, as there will be no public web page where users can find more information about this theme). Yet, for the Text Domain, which is a unique identifier used for theme translation, I had a hard time to figure out that it must match the slug of the theme (i.e. the Theme Name with dashes). Granted, I could have skip these fields all together (as they do not apply to my use case).

Once all these modifications implemented, I saved the file as style.css [using save as type: All Files (*.*)] and uploaded it in the twentyseventeenchild folder (using File Manager, keeping the default file permissions).

/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/

Pulling in the parent (and child) stylesheet(s)

As for now, the stylesheet of the child theme is just designating it as a theme. In other words, the new child theme’s style.css file has no styling information. Therefore, the next step is to enqueue your parent and child theme stylesheets. Quick reminder: DO NOT use the old @import method! Instead, it is recommended to use a functions.php file.

The child theme’s functions.php file, which runs before the parent theme’s functions.php allows the child theme to modify functions defined in the parent theme and/or to add functionality to the parent theme.

Using the same approach as before, I opened Notepad, copied and pasted the code from the codex², and adjusted it as such:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentyseventeen-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

There was only one value to adjust; still, for that step, the tutorial from Elegant Themes was quite handy. In particular, they explain how (and why) to replace the ‘parent-style’ tag (or $handle) with the one used by your parent theme. Accordingly, I replaced ‘parent-style’ (line 4) by ‘twentyseventeen-style’. That is it. I saved the file as functions.php and uploaded it in the twentyseventeenchild folder.

With this code, your child theme will inherit Twenty Seventeen parent’s style. Moreover, your child theme stylesheet will load after the parent one. Given that, with CSS, the last instruction takes precedence, you will be able to override the rules of the parent theme (by adding them in the style.css file below the code already implemented).

A theme’s screenshot

When you browse the Appearance > Themes screen, each theme features a thumbnail of the theme’s look. By default, child themes don’t have this image. Now, as clarified in the codex, a screenshot image is not required for a Child Theme, but it will look sad without one¹.

To provide one to your child theme, you just have to add a screenshot.png file within your child theme’s directory. I didn’t have any preview or thumbnail of my child theme; yet it should not differ drastically from the one of Twenty Seventeen. Therefore, I decided to use the latter one, with a slight modification.

Within File Manager, I navigated to the folder of Twenty Seventeen (/wp-content/themes/twentyseventeen) and downloaded the screenshot.png file. Using a highly sophisticated image editor – namely Paint – I added the word “Child” on top of the cactus pot. Once done, I uploaded the modified file to my child theme folder (/wp-content/themes/twentyseventeenchild).

Since I intended to use different customizations for my website and my blog, I repeated the procedure – creating a second child theme with a different name (and in a different folder).

Almost done!

Like any other theme, to use a child theme, you have to activate it. If you are following The CogitActive Saga, you may know that I set up a WordPress Multisite installation. In such installation, theme management differs slightly compared to what you can expect from a regular installation. In short, to activate my child theme, I had to enable it first.

In addition, as briefly alluded, I created several child themes (one for each site) and I didn’t want to make them available for other sites to choose. To do so, i.e. to have it available for use only on one site, I – the super admin – selectively enabled it through the Themes tab of the Edit Themes screen (Sites > All Sites > Edit > Themes; see Multisite themes management). Next, I went to the Administration screen of my website (i.e. leaving the Network Admin screen) and simply activated the child theme (Appearance > Themes).

The codex warned that you may need to re-save your menu from Appearance > Menus . . . after activating the child theme². I didn’t experience any issue; my child themes were up and running!

¹ See Child Themes (twentyseventeen). ^
² See Child Themes. ^
³ If you want to know more about this – that is when WordPress will use the code from your parent theme and when it will use the code from your child theme – you may consider reading this article by Rachel McCollin: Understanding How WordPress Outputs Code From Child Themes. ^
⁴ This is not the first time I have to comment on this issue (see .htaccess textbox in To www or not to www?). Many authors recycle (without updating) their articles. Even worth, often just the published date is “updated” (automatically?). In case of doubt, it is not a bad idea to inspect the source code to find the “real” published time. ^
⁵ A good time to remind you my modus operandi, which is to study every aspect of a problem – gathering and reading all possible information on the subject matter – before to take the most informed decision possible (see How to podcast?). ^
⁶ Indeed, if your theme has more than one .css file . . . then you will have to make sure to maintain all of the Parent Theme dependencies². ^