It is so easy to install a WordPress theme for yourself – or better yet, your client’s great new portal. Surely you will do some customizations, match the colors to the client’s brand. Maybe you’ll add content or even write blog posts once a week from here to eternity. Then you sit back and enjoy. Right? Wrong!
If the theme was written by someone other than you, then that developer is going to update it. Think bug fixes, security patches, compatibility with the next core release, or maybe they want to add parallax. (Or remove parallax if designers are adding so many parallax-y effects that their site looks like an air traffic control screen.)
When (not if) that update comes, you’ll have no way of knowing which of your edits will be overwritten. A good, safe bet is “all of them”. That is why WordPress has Child Themes. Child themes look into the parent theme and grab all the templates, styles, JavaScript and use it for themselves. Then, the child theme can add its own templates, styles, and JavaScript and overwrite the parent theme. And when the parent theme’s developer sends an update? The parent theme gets updated (and the old files are wiped out) while your child theme edits are safe.
I nearly learned this the hard way on So There’s That. I installed the Serene Theme from Elegant Themes (i.e. it wasn’t mine), and I made a few edits. Then a few more. Then I added a bit to `functions.php` and got warmed up with action and filter hooks. Then I added a return to top button and a related posts widget at the bottom of every post. (I’ll get into those code snippets in a later post.)
Then I read up on child themes and said, “uh oh”. The timing was convenient because I resolved to make a child theme for STT and push my functions and CSS styles to a safe place, I saw the update notice glaring balefully at me, which I dared not touch.
Making a WordPress Child Theme
We will talk about two ways here to do a child theme – the Easy Way, and the Learning Way that helps you learn how the system works. Let’s start with the Learning Way. First pull up your handy webpage of the WordPress Codex for reference. Then, get into your backend server, your webhost’s cPanel, or somewhere you can manipulate template files.
Is your theme called, say, “Serene”? You could make a folder called Serene-Child and call your theme “Serene Child”, but that is a missed opportunity for branding. Instead, make a theme related to your client’s branding, or something otherwise special. I’ll make a theme called “So There’s That”.
In your new folder, add two files, `style.css` and `functions.php`. In `style.css`, add the headers, without which WordPress will not read your child theme:
/** * Theme Name: So There's That * Theme URI: http://davidkissinger.com * Author: David Kissinger * Author URI: https://davidkissinger.com * Description: Child theme for sotheresthatblog.com based on Serene by Elegant Themes * Version: 1.5.0 * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Template: serene * Text Domain: Serene * Domain Path: /languages/ * Tags: black, blue, green, gray, orange, red, white, yellow, dark, light, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, fluid-layout, responsive-layout, buddypress, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, photoblogging * */
In `functions.php`, do your future self a favor and add this first line:
<?php // functions.php template file for So There's That theme - child of Serene Theme
That first line is just a comment. Why? When you’re wrapping a last bit of edits and it’s close to midnight, it will be too easy to get into the wrong `functions.php` file.
Go into Themes in the admin panel, do a live preview of your child theme to be sure it works, and then activate it. That’s it! Actually there’s more, however you now have a fully functioning theme with just two files.
When should you not enqueue? Never
Child themes have other features that we won’t go into here, however I want to touch on CSS stylesheets and JavaScript. Enqueueing scripts the WordPress way may look a bit much, however it also ensures that scripts load in the right order, don’t load more than once, don’t overwrite themselves, or just disappear completely. Read up more about enqueueing your styles and scripts here.
Enqueueing is done in `functions.php`. This file is different than other template files, say `single.php`. If you put `single.php` into your child folder, then it will overwrite the `single.php` that is in the parent folder. This is helpful when you want special formatting kept safe in the child theme.
`Functions.php` is different. The child theme `functions.php` does not overwrite the parent theme `functions.php`. Rather, they both run. The child theme `functions.php` goes first, followed by that of the parent theme.
Here is how So There’s That (the child theme) enqueued the stylesheet from Serene, the parent theme:
// enqueue parent theme style scripts
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
And here is how STT enqueued a short JavaScript snippet for the Return To Top button (which we’ll cover in a later post):
// Enqueue script for return to top
function stt_scripts() {
wp_enqueue_script( 'stt-rtt-js', get_stylesheet_directory_uri() . '/js/stt-rtt.js', array( 'jquery' ), false, true );
}
add_action( 'wp_enqueue_scripts', 'stt_scripts' );
The RTT button is not a part of Serene, so I added a new file to the child theme’s `/js` folder called `stt-rtt.js`, and I indicated that it was dependent on jQuery which meant that it had to load after jQuery, and I also indicated that the `<script>` tag had to be at the bottom of the page and not the top.
Also, here’s an important but wacky convention in WordPress to be aware of: Which `style.css` file do you want to load – the parent one or the child one? In the WordPress enqueue universe, use `get_stylesheet_directory>uri()` for the child theme and `get_template_directory>uri()` for the parent.
Next: Making your child theme the Easy Way.
