optimizer-child-theme
Blog

How to make a WordPress Child Theme

Child Themes allow you to make changes to a template theme and keep those changes even when the theme gets updated. For example, if you decide to change some PHP or CSS in your template theme’s “header.php” file, you’ll lose all your data with the next update. Unless you use a Child Theme.

Get Set Up

Before you open the WordPress Codex steps to implementing a Child Theme, you might want to open your server and navigate to:

public_html > wp-content > themes

If you’ve made changes to any of the files, including adding custom CSS to your theme under:

Appearance > Edit CSS

make note of the files and the changes (easiest to do as you make the changes). You’ll want to copy over the files you’ve made changes to, and add any custom CSS from the “Edit CSS” page in your WordPress dashboard to the “style.css” file. I like to add a /* ARIEL CUSTOM */ comment above and below my custom content. Keeps things in order and makes them easy to find. SIDE NOTE: To “comment things out” (essentially hide them with the code) add a /* before and a */ after for CSS or PHP files, and a <!– before and a –> after for HTML files. Comes in handy.

Make the transition

WordPress has an excellent explaination of why you should use a Child Theme, as well as a “How To” guide. You’ll need to create a new Child Theme folder on your server then copy the “functions.php” and “style.css” files to your new folder. Follow the instructions outlined in link above.

If you’re not even the least bit advanced with WordPress, find a friendly developer who can give you a hand. It’s not too difficult though. I don’t consider myself an advanced developer and I can figure it out. But I am somewhat familiar with PHP. (On a side note I want to take some online courses on PHP so that I can start developing WP themes, possibly for a bit of a profit).

As you go through the steps outlined by WordPress Codex, make sure you DON’T SKIP ANYTHING! Also, naming your new folder as e.g. optimizer-child is super convenient for copying contents from the main theme folder to the Child Theme folder (you just add “-child” to the end because the theme name is already pre-populated). For another example, refer to the image in the WP Codex “How to Create a Child Theme,” with the twentyfifteen-child theme.

EXTRA TIP: When you’re adding the header to your “style.css” file, make sure you keep the

Template:     twentyfifteen

part named as the parent theme. If you add “-child” after the parent theme name it won’t work.

Child Theme on Ariel Coverage

I decided to make a Child Theme on ArielCoverage.ca for my newly enabled theme called Optimizer. I need to use a Child Theme because I like to fiddle around with the out-of-the-box theme settings to make my blog look exactly how I want it. The original theme offers some pretty sweet built-in customizations to begin with, and the pro version seems pretty good too. I might even buy it after test-running the free version for a while (although I can enable some of the pro features myself by tweaking the CSS and PHP, like putting up a static menu/header).

After creating a new folder and moving the “functions.php” and “style.css” files, I also moved the following to the “optimizer-child” folder:

  • header.php
  • footer.php
  • screenshot.png
  • the “framework” folder
  • sidebar.php

I moved these files because I’d edited them before implementing the Child Theme. If I want to keep my changes (which I do!) I need to copy them over.

Can I help?

Have questions about enabling your Child Theme? I’ve made over 10 for this blog alone (excluding other websites and blogs that I’ve setup). Throw down a comment. I’m happy to help!

Leave a Reply