WordPress Child Themes in 2016
Why you should use one and how to deal with the most common issues with them
What is a Child Theme?
WordPress introduced the concept of child themes in early 2010, at least that is when they first appeared in the Codex. Since then child themes have been described more or less like this:
“A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.”
The first reason listed to use a child theme is:
“If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.”
That is spot on, however it is only a part of the story of child themes. Both those sentence are based on the assumption that child themes are always a blank canvas only needed for you to modify the parent theme by yourself.
Instead there are a lot of free and commercial child themes available, that already add their own styling/layout changes to their parent themes, while only inheriting their basic styling and functionality.
Genesis Framework from StudioPress, was probably the first theme massively adopted by third party developers and designers to build and distribute their own free and premium child themes. Today there are countless of them available. Try searching “Genesis Child Themes” on Google to see for yourself. There are even 3 Genesis directory child themes for GeoDirectory. 🙂
Divi from elegantthemes.com appears to be another Framework that has recently attracted a high number of developers and designers to build Divi child themes. There are over fifteen website devoted to selling commercial Divi child themes, few of them are marketplaces open to third party developers, with inventory of almost 100 child themes and these figures are quickly growing.
Here are few website that pop up when searching “Divi child themes” on Google:
elegantmarketplace.com
divi.space
elegantchildthemes.com
montereypremier.com
divichild.com
sunflowerchildthemes.com
aspengrovestudios.com
creativechildthemes.com
candythemes.com
diviwebdesign.com
http://thedesignspace.co
boltthemes.com
Custom designed Child Themes are also available through the wordpress.org theme directory and I believe soon we will see this trend appearing on themeforest too.
I’m sure that I am forgetting to mention other popular frameworks with plenty of child themes available, but that is not the main point of this post.
As we said, all these child themes don’t simply inherits the functionality and styling of the parent theme, they add a lot more: like new styling, more functionality and extra templates. For these reasons child themes can’t just be considered a blank canvas to use when customizing a parent theme but in a lot of cases they are full blown products that should be treated differently, just like themes to be precise.
In my opinion the correct evolved definition for today would be:
“A blank child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Blank child themes are the recommended way of modifying an existing theme. Free and premium child themes are distributed with extra styling, functionalities and templates that enrich and customize the parent theme styling and functionality.”
Why should they be treated differently?
Because all custom designed child themes depend on their parent theme and when the parent theme is updated, the author of the child theme may have to release an update for the child theme too. Sometimes it is a compatible plugin that forces child theme authors to update their code.
A lot of users change a bits of the custom designed child themes and given that grandchild themes are not a thing, most add their custom CSS and functions into the child theme files directly.
If the user customization is simple, updating is not much hassle but if the user has modified the original code of the child theme to customize it he may be in trouble.
The only solution available when you are already in that situation is to use a tool to find differences between two files/folder, compare your customized file with the original file of the child theme and re-apply all customization for functions, templates and CSS into the updated child theme, this is a tedious operation to do and the worst part is, it will have to be performed again after every update is released by the child theme author.
To avoid this, it is imperative that files of a custom designed child theme are never modified just like we should never modify the files of a parent theme.
What is the solution?
The only option left are mighty plugins! For example Simple custom CSS for CSS and Code snippets for functions.
This is what child themes Developers and Designers should suggest to the users of their products, also it is imperative that they add many filters and actions into their code to allow users to easily modify their work without having to edit the child theme files directly, just like themes developers do.
Create a blank child theme
Now, if you want to create your own blank child theme to customize one of your themes, this what you need to do:
1) Create a a new directory in wp-content/themes and give it the name of your choice. Example my-child-theme
2) Inside your new directory create a style.css file (the stylesheet).
3) Inside the new directory also create a functions.php file.
4) Now you need to add the stylesheet header to the top of the style.css file, here an example of stylesheet header that you can copy, paste and modify:
/* Theme Name: My Child Theme Theme URI: http://example.com/my-child-theme/ Description: A child theme that I designed Author: John Doe Author URI: http://example.com Template: name_of_parent_theme Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Text Domain: my-child-theme */
Make sure to edit all example texts with information about your theme and don’t forget to change the template part, adding the correct directory name of the parent theme.
5) Last you need to enqueue the parent theme scripts and styles and you can do that by adding this code to your functions.php file using a wp_enqueue_scripts action calling the function wp_enqueue_style(). Here an example
<?php<br />
add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_styles' );<br />
function parent_theme_enqueue_styles() {<br />
wp_enqueue_style( 'parent-style', get_template_directory_uri() . 'https://u8e8u2d3.stackpathcdn.com/style.css' );<br />
}<br />
?>If you want to use extra css files inside your child theme you will need to enqueue them too.
That’s it, now you can activate your child theme and start customizing it by adding CSS in the style.css file and functions in the functions.php file.
Templates
Once your child theme is active, you can also start editing the parent theme templates in it.
Let’s make an example. Say you want to modify few elements of the header and footer of the website, in this case you will transfer a copy of header.php and footer.php inside your child theme folder and that’s it, you can customize them, without having to worry about parent theme updates wiping out your work.
There is one thing that could go wrong and you should always keep in mind, if the parent theme header and/or footer are modified by the theme author, you will need to start over.
To do this first rename the old header.php and/or footer.php inside your child theme to make space for the new ones. Move a copy of the new header and/or footer file from the parent theme inside your child theme and re-apply the customization you had in the old files.
Add new templates
Not only you can modify the parent theme templates inside your child themes, but you can also add new templates for your pages, for your blog or for every element. Adding a new page template to a child theme is identical to adding a new template page to a theme.
Action, filters and functions
Through the new functions.php file of your child theme, you can add almost anything to your child theme. For example you can add a new body class to a specific template to be able to better customize it with CSS, this is done using a WordPress filter (body_class).
There are plenty of other filters available by default in WordPress, but it is the themes filters and actions that will really make the difference, the more actions and filters are available in the parent theme, the easier it will be to customize it.
What if i customized my parent theme already?
That’s bad and you should feel bad, you just caused yourself more work but it’s simple when you know how.
The process is identical to creating a blank child theme, but you also need to move the customized code from the parent theme to the child theme.
If the custom code changes are in 1 of the templates, the operation is simple, you just need to copy the template into the child theme.
If the custom code is in the functions file you will need a tool to compare file difference and you must have the original unmodified theme files from the same version. Using a tool like notepad++ or winmerge you will be able to check the differences between the original file and the modified file and find your custom code. One you have found it, you can move it to the functions.php file of your child theme.
This is a very annoying operation, fortunately there is a plugin that is supposed to help you go through this called Child theme configurator, however I have never tested it and I’m not 100% sure it will work well in every possible situation (if you try it let me know your thoughts in the comments).
In the codex page about child themes there are instructions that appear to be for it, but it’s not 100% clear, in any case, that’s why you should always ask to your theme author to also provide a blank child theme for you to work on.
The only reason why a child theme is not useful at all, is if you do not intend, under any circumstances, to modify the look and functionalities of your theme.
Conclusions
I believe that a lot of themes will slowly disappear from the market in favor of big theme frameworks like Genesis, Divi and other big players including those on themeforest and we will see a plethora of child themes built on top of them, giving end users a wider choice of designs ready to be used.
Do you agree or do you think that I’m totally wrong? Feel free to express your opinion in the comments down below!
