WordPress sites are icebergs in a sea of websites. They glide seamlessly along, functioning smoothly for their clients. To achieve this WordPress sites tend to have a dramatic underside composed of plugins and wacky code. One simple way to clean up a WordPress site’s underbelly is by implementing a child theme. While it is arguably the most beneficial thing you can do when setting up a new theme, it’s often overlooked. If you are using a premade WordPress template or theme, setting up a child theme should be the first thing you do after installing your shiny new theme. At first, it might seem unnecessary, after all, you just found the theme of your dreams, right? Unfortunately not.
What Does a Child Theme Do?
Now imagine for a second that you take a super amazing photograph of an iceberg during your travels. You decide that you want to print a copy for your mom (being a big fan of icebergs herself), but there are one small problem…penguins! Your mom hates the flightless creatures, but your amazing photograph has a whole waddle of them. The beauty of current technology allows you to edit out all these flightless birds on the copy you send your mom without destroying the beauty of the original photograph. A child theme will allow you to perform a similar process to a WordPress theme by allowing modifications that won’t affect the original theme. This allows you to restart your modifications at any time if you make any drastic mistakes.
Why Child Themes?
The reason a child theme is so important is that it adds a layer of protection to your theme every time the theme needs an update. Typically when your theme has updated any customizations and settings will be overwritten and reset to default values. While many theme builders have started developing themes that will leave your settings and customizations intact, it’s better to be safe with the extra security that a child theme provides. In addition to the risk of losing customizations when you run theme updates, any PHP files you have edited will be returned to their original state. With a child theme in place, you can save any updated PHP files in your child theme folder without worrying that files will be overwritten every time the theme is updated.
How Does It Work?
A child theme works by creating a “dummy theme” that can be a simple as two files: one PHP and the other CSS. These two files provide WordPress with a little skeletal info but refer to the parent theme for most of its code. With this dummy theme in place, all your modifications will be saved to the child rather than the parent. This allows you to easily update your parent theme with fewer repercussions.
There are two easy ways of creating a child theme. The first is by implementing a plugin that creates a child theme automatically, the second involves coding your own files. The first option is great for those who want to preserve their customizations without the hassle of dealing with PHP. The second option is more ideal if you will be changing your theme’s PHP files.
Option One: Plugin
I tested this option for the first time last week and it was a simple solution. The one that I tried was the “One-Click Child Theme” plugin. For those who only need the safety of a child theme, this is the route to go. All you need to do is install the plugin and it will ask you a few simple questions to create the new theme. After the child theme is up and running, the plugin can then safely be deleted (active plugins will affect your site’s speed, so delete any that are unused).
Option Two: Code Files
The second option is for those who like to have greater control over their code. While I’ll briefly cover coding a child theme, as your child theme becomes more complex you should consult the WordPress Codex for advanced functionality. You will need two files: functions.php and style.css. These files will contain all the necessary elements to get started coding the child theme. The first file is functions.php. The following code is all that is needed for that file:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
The second required file is style.css. This file tells your WordPress install the name of your child theme, who the author is, and which theme is the parent theme.
/* Theme Name: Child Pro Author: Author Name Template: parentpro (this is the parent theme name) */
While the code above will get the job accomplished it’s better to add some extra info to this CSS file as follows:
/* Theme Name: Child Pro Theme URI: https://themeforest.net (this is the parent theme homepage) Description: Parent Pro Theme Author: Author Name Author URI: http://www.holtning.com Template: parentpro Version: 1.0.0 */
In addition to these two files, you can add other PHP and CSS files to the child theme as needed. When adding additional or modified files remember to use the same file/folder structure as the parent theme.
The final step is to either upload the files through your FTP client or upload a zipped version of your child theme as a new theme in WordPress.
If you have any question about creating a child theme feel free to reach out!
Stay splendid,
Matt