How to create a child theme in WordPress – A Step by Step Guide
Tired of editing your WordPress theme and reverting to original? Learn how to create a child theme in WordPress.
This article is in the series of WordPress tutorials.
Click here to go directly to step-by-step guide.
You may wondering what “child theme” really means? A child theme is called a ‘child’ theme because it inherits most of its styling and functions from its parent theme. For example, if you already have a basic theme set up, you can use the existing theme as a base to style your own custom theme.
Reasons on Why You Should Use a Child Theme
- Most people complain on their modifications being lost when there is an update, a direct modification and may cause this problem but that’s where the child theme comes in. The child theme works as an independent directory with which you create multiple copies regarding the theme’s files; this would never ever be over-written by any update!
- If you are a regular learner and you want to learn about how to develop themes, then this is a very specific reason to be choosing a child theme.
- One advantage is that you can keep track of what development you have already done.
- Since it’s very easy to find out what you have already done, it is equally easy to restore everything back to the original (parent) theme.
How To Create A Child Theme in WordPress
To create your very own WordPress child theme, you need to follow the following steps:
1) Locating the child theme directory
Whenever you start creating your own child theme the first step is to create a child theme directory. The directory is placed in the “/wp-content/themes”, this directory contains folders which would represent everything related to your current parent theme.
2) Creating your own child theme directory (folder)
Once you’ve located the directory you have to create a new folder renaming it to whatever you like, it is always recommended to name it with a descriptive name for you to remember. The convention is mainly considered as the name of your parent theme followed by a hyphen and then the name of your child theme, like “parenttheme-childtheme”. For instance, we use “twentyfifteen-child” as a name of child theme of “twentyfifteen“.
3) The style.css file for your child theme
Easy steps until now, right. Now is the time to create your own style.css file, any credible child theme would need this file. Yes, just as you thought, this file is a postscript of some sort which will be linked to your parent theme.’
Every style.css file starts with certain specific information, and it must begin with information as shown below:
<<<<<<<<<<<<< add info image>>>>>>>>>>>>>>
If the file you uploaded is in a current state (having just an empty style.css file with some valid information), WordPress would take that as a default styled file (which obviously contains nothing) and this would result in your theme with no CSS styles at all (not even your parent theme styles). But there is a solution; you just have to add a certain code for WordPress to recognize your parent theme. The code is:
The parenttheme here is the name of your very own parent theme and you will have to change it accordingly.
After you have done everything, all you need to do is to save your style.css information to your child theme’s folder. Moreover, you now have done all the initiations, all you need to do now is to study yourself or check out the guides for creating your own CSS styled website. This would surely require your own creativity and recommendations, every bit of addition will give your theme a unique look and a better chance of acknowledgement.
4) Switching your child theme on
With everything done and ready, all you need to do is activate your child theme, and for that you need to go to your WordPress Administration Panel and click on Themes in the Appearance section. The fun thing is that your parent thing is already up and running, but you will find your custom made child theme in that theme section. All you need to do then is to click “Activate” and you will see your self made child theme running, it will also be shown as the currently active theme.
The main reason for doing all this is because your parent theme, on any update, will never affect your child theme’s style.css file.
5) For extra addition and alteration
Overriding applies to the child theme’s style.css file but the same thing doesn’t happen for the function.php or the php file. Some people out there know how to work on with php and this is why this web designing query pops up on if someone wants to edit the already present parent theme’s php file.
But not to worry, the method for handling php files is quite simple and trouble-free, it’s absolutely not just putting the function there because an update would erase it, the best way is to create the child theme and then add your custom function.php file in it and that ought to add your function to that file. This will do the same as replacing your parent php file, but the advantage is that it would not be replaced by any update.
- Avoid copying the whole content of the parent theme’s php file to the child theme’s php file.
- The directory of your child theme must be the same as that of the parent theme. If you have made up your mind to change the php file in “/parenttheme/includes/external/php/example.php”, you should place it in ”/childtheme/includes/external/php/example.php”.
Throughout this article, I have taught you on how to create your own WordPress child theme. Developing your own child theme is a very good way for you to start learning WordPress theme development. You can see it’s extremely easy and for now you should have no problem in not doing so.