A Primer on Child Themes: Making a child theme for So There’s That

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:

 

 

In functions.php, do your future self a favor and add this first line:

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:

 

And here is how STT enqueued a short JavaScript snippet for the Return To Top button (which we’ll cover in a later post):

 

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.

David Kissinger consults with companies, trade associations, non-profits and entrepreneurs on government affairs, public relations, marketing, IT strategy, web development and content.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.