How To Create A WordPress Child Theme
If you decide to use an existing WordPress theme or especially a premium WordPress theme, you will undoubtedly change it and tweak it to meet your exact needs and preferences. But what happens when there is an update to that theme?
Unless you are careful, all your customisations will be lost as the update installs and wipes over your careful coding.
Help is at hand, however!
By making a ‘Child Theme’ of your chosen WordPress theme, you can avoid much of the heartache and extra work involved when it is updated.
Generating a Child Theme
There is much mysticism around making a Child Theme, and really it isn’t that difficult. You should make a habit of making them as soon as you find a theme that you like and want to use in a website or Blog.
It is much easier and much more convenient to make a Child Theme before you start altering the look of the WordPress theme you like. While you can do it later, it is a pain and should be avoided!
The first thing to do is make another directory to put your Child Theme in. This should be placed in ‘wp-content’ then ‘themes’. It should be called ‘your chosen theme child’. Note that by convention, theme names are not capitalised.
You should now use the file editor of your choice to build a file called ‘style.css’. Remember that when saving this file, type in its full name -including the extension- then the ‘Save as type’ and if using Notepad should be set to ‘All Files’. This will preserve the .css file extension. The ‘style.css’ file looks like this:
1 /*
2 Theme Name: Your Chosen Theme Child
3 Theme URI: http://yourwebsite.com/yourchosentheme-child/
4 Description: Child theme, based on YourChosenTheme
5 Author: Your Name
6 Author URI: http://YourURI.com
7 Template: yourchosentheme
8 Version: 1.0.0
9 */
Save the style.css file in the directory you created on your website.
The most important two lines of this code snippet are the ‘Theme Name’, which should have the ‘Child’ after it, then the ‘Template’ which will point WordPress to the Parent Theme. Again, note all lower case.
If you were to go back to your WordPress site, into the dashboard, then you were to select your newly-created child theme, it would work, but it would look terrible as there would be no styling. To be able to add the original styling, but still have our own, new style.css file, we need to write another file to place in your new directory. This is the ‘functions.php’ file.
Your functions.php file should look like this:-
1 <?php
2 add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );
3 function enqueue_parent_styles() {
4 wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
5 }
6 ?>
This PHP code tells WordPress that there is a Parent stylesheet and that it should be enqueued before loading the Child’s stylesheet.
When WordPress is first loading its theme, it will check in your new directory first, find these two files, style.css and functions.php, and refer back to your original theme for styling guidance.
Now, importantly, any changes you make to style.css should be made here rather than the original theme’s style sheet.
Also, if you need to change any coding, either HTML or php, you should change the file you need, then save it in this new theme directory. WordPress works by checking the Child Theme directory first. If there is none present, it will ‘fall back’ to the parent theme.
You are now ready to activate your new Child Theme, then go ahead and try it, but don’t worry too much if it doesn’t work first time. If this happens, simply switch back to your original theme, then try to work out just what went wrong. Common causes are typos, particularly in the new ‘functions.php’ file.
When you Child Theme is fully working and looks exactly like the original theme, you can experiment with some styling. To do this, simply look back at the original style.css file, and find the part you want to change. Copy that part, change it, then place the new code into the new stylesheet. This will have the effect of overriding the original stylesheet, but maintaining the parts that you want to keep.
Conclusion
So, this is the easiest way to avoid all your modifications being deleted by a theme update, but you should remember to make a Child Theme before you make any modifications whatsoever to your parent theme, then place all modifications in the Child Theme directory.
Above all, remember that if things are not going well, and your new Child Theme refuses to work, then you can always go back to the original and everything will work as it should. Making Child Themes is a fairly ‘low risk’ activity.
Join over 50,000 developers, designers and entrepreneurs!
Get exclusive articles, special deals and freebies delivered straight to your email inbox!