What is a Child Theme?
A child theme is related to and modifies the functionality of another given theme- a parent theme. For any WordPress theme that you choose to run, you may create a child theme that will modify your chosen parent theme to your specification. Child themes are the safest and smartest way to modify your existing WordPress theme.
Why would I use one?
There are two main reasons why you would want to create a child theme: permanence and organization.
First off, you want to be able to update your website as new updates to the theme you are currently using become available. However, every time you update your theme you will lose all the modifications you have made directly to that theme’s stylesheet or functions.php.
Not updating opens a whole host of potential problems, the foremost being security. Not updating should not really even be considered as a possible solution for preserving your changes. Outdated software is one of the three leading security issues in WordPress websites.[1] WordPress itself and all of your themes and plugins should always be kept as up to date as possible.
Organization is the other major reason to create a child theme. Even if your code modification is quick, simple, and amounts only to a few lines, changes build up over time. As you continue to customize and stylize your WordPress site to be just the way you want it, your style.css can become bloated and difficult to navigate effectively. This will create problems down the road as you troubleshoot your own site, and if you need to seek technical support or developer assistance, can even wind up costing you money as a reflection of increased time to sort through your files.
How to make a Child Theme for your WordPress site
Creating a child theme can be accomplished in the three easy steps listed and then detailed below:
- Create a directory for your child theme in your WordPress install
- Create a custom style.css for your child theme
- Enqueue the parent theme via the child theme’s functions.php
It’s that simple. Here’s the detail for each of those steps to walk you through the process:
1) Create a directory for your child theme in your WordPress install
Navigate to the theme folder (under wp-content) in your WordPress directory. You can name the theme anything you like, but for organization’s sake consider using the name of the parent theme followed by –child. Example: twentyfifteen-child.
2) Create a custom style.css for your child theme
Inside your new child theme folder, create a new stylesheet (style.css). Now open that style.css and paste in the following code:
https://gist.github.com/Quay3/9a0be3f933d40f332a1b
The critical lines in the code above are the Theme Name and Template lines. Theme Name tells WordPress the name of your theme and that name is then displayed in the theme selector of your WordPress site. Template directs WordPress to the parent theme. The example text in these two lines should be changed to reflect the parent and child theme you are going to be using if you are using a theme other than twentyfifteen. The rest is ancillary and can be modified at your discretion.
3) Enqueue the parent theme via the child theme’s functions.php
Enqueuing the parent theme places the child theme’s stylesheet in line to be loaded after the parent theme’s stylesheet. While the child theme is technically in place prior to this point, there will be no styling because WordPress sees the child theme’s stylesheet and will load it instead of the parent stylesheet. This step ensures that both are loaded and the desired styling is present.
To accomplish this, create a functions.php in your child theme’s folder along with the style.css you just made. You will be adding a wp_enqueue_script() to your new functions.php.[2] The first line of your functions.php needs to be an opening PHP tag (<?php). Make sure you have <?php as your opening line, and below that paste the following code:
https://gist.github.com/Quay3/19e4f3fc8c65d84be366
Congratulations! Assuming you followed the steps above, you now have a working child theme. All that’s left to do is activate it. Log in to your site’s admin panel and go to Administration Panels>Appearance>Themes. Your new child theme should be listed there using whatever name you chose in the Theme Name line of step 2 above. Activate it and you’re ready to go!
James says
Thanks Quay for the article. In other words I should only customize or make changes to the child them and not the parent theme. Right?
Quay Morgan says
James,
That’s correct. Only modifying your child theme keeps the parent code clean and means you can update your theme any time without losing your changes! Have fun experimenting!
James says
Thanks Quay. 1. Does that apply to a multisite using the same theme?
2. After creating a child theme which do I activate as the website theme, the main theme or the child theme?
Thanks