A Comprehensive Guide to Creating a WordPress Child Theme
WordPress child themes. They might sound (and seem) intimidating at first, but once you learn the ins and outs (as well as the beauty) of WordPress child themes, you are going to have a lot of fun. In this post, we will break down the WordPress child theme into its various parts. To put it in another way, we will learn:
What is a WordPress Child Theme
Merits of WordPress Child Themes
Demerits of WordPress Child Themes
How To Create A WordPress Child Theme
WordPress Child Theme Resources
What Is A WordPress Child Theme?
So, what is a WordPress child theme?
A WordPress child theme is basically a WordPress theme that “borrows” template files and functionalities from another WordPress theme known as the parent theme. Don’t punch anything yet, I will explain everything in detail I promise.
A parent theme is a typical WordPress theme such as our top selling Total WordPress Theme, the default Twenty Fourteen theme or whichever theme you’re using on your website.
The most basic WordPress child theme is simply a folder that contains a special style.css file. Don’t worry it’ll all make sense once I explain. One of the questions that’s probably going through your head right now is: Why would one want to use a child theme while there are plenty of parent themes?
The answer is quite simple. Most parent themes get updates now and then. So, if you take a parent theme and customize the code (and style), you will lose all these changes next time you update the theme. This is where WordPress child themes come in. A WordPress child theme gives you the power to customize your parent theme without running the risk of losing your changes when you update. Of course, you can choose to do away with the updates if you don’t mind exposing your website to hackers.
Moving on…
A few paragraphs ago, I mentioned that child themes “borrow” template files and functionality from parent themes. How does this happen? Think of child themes as shadow themes; they mimic their parent themes. It’s all like creating a copy of your parent theme without actually copying anything. Sounds like magic, right?
Press the freeze button. How do you create a copy of the parent theme without actually copying anything? The secret to understanding child themes lies inside the special style.css file we mentioned earlier. Actually, the secret is a single line found inside the style.css. Which line you ask? More on that in a moment. Since we will create a child theme later in this post, I will just introduce a few basic concepts to reveal the line I’m talking about and give you a better understanding of child themes.
To build a child theme, you must create a folder (for the child theme) in your WordPress themes directory. You can name the folder whatever (or after your theme). Next, you must create a style.css with the following code:
/*
Theme Name : The name of your child theme (e.g. Total Child Theme)
Theme URI: http://www.example.com (Your child theme’s URL)
Description: A brief description of your child theme
Author: Your name goes here
Template: Your parent theme directory name (e.g. Total, twentyfourteen, etc)
Version: 1.0.0
*/
You must save this style.css in your child theme’s folder. Now, go back to the sixth (6th) line in the code above. You will see:
Template: Your parent theme directory name (e.g. Total, twentyfourteen, etc)
This line tells your child theme from which parent theme to borrow functions and template files. This simple line links your child theme to the parent theme, acting as a conduit through which the child theme receives template files and functionalities from the parent theme. This means you must have the parent theme installed on your WordPress platform.
Suffice to say, without this line, you don’t have a child theme. You just have a folder and a typical style.css file.
In summary, the template line inherits (most of) your parent theme when you activate your child theme. All the changes you make to your child theme will not be affected if/when you update the parent theme. How do you like that explanation? Are you following or isn’t it clear enough? If you are with me, let’s move on to the advantages and disadvantages of WordPress child themes.
What Are the Benefits of Using a Child Theme?
There are many benefits in using a child theme and we recommend anyone using a theme that wasn’t custom built for their website to setup and activate a child theme. We’ve listed some of the key benefits for using a child theme and why you should strongly consider it.
Secure Updates
WordPress child themes merely borrow functions, templates and styles from the parent theme. This allows you to customize your website without touching the parent theme. Therefore, whenever the developers update your parent theme, you can safely upgrade your website without losing custom changes.
Child themes are easily extensible
WP child themes give you a lot of flexibility. You can create new template files that were not part of the parent theme. You can add new functions, styles and so much more. Additionally, there are many commercial and free theme frameworks with extensible options to get you started.
Child themes are Fallback-Safe
Every developer is human, and we all know that to err is human. Everybody makes mistakes and everybody forgets. That said, you will be in the soup if you forget to code for something when using a parent theme. Things are a bit different with child themes. If you forget some code, WordPress will automatically load an alternative (or the original) from the parent theme. Of course, this is only true if the code exists in the parent theme.
What are the Negatives of Using a Child Theme?
While in general child themes are awesome and we recommend that everyone using WordPress activate a child theme on their site if they plan on making any potential tweaks in the future, they are some things you should keep in mind.
There is a Learning Curve
Child themes are primarily for extending or customizing the functionality of your parent theme which means if you aren’t a developer there isn’t much you’ll be able to do with your child theme and you’ll want to learn some coding to take full potential of your child theme. So if you’re a newbie, you need time to learn the workings of parent themes and WordPress (as well as a bit of code) in general to enjoy the full potential of child themes. All the same, you must earn your stripes. After all, you will be coding away like the pros in no time!
Things Break or Are Left Behind
If you had built your website around a parent theme, you will may have to tweak a few things (e.g. menus, widgets and/or theme options) when you shift to a child theme. Some themes save settings in the database based on the theme name so when you switch to your child theme it may look like you have lost all your parent theme settings (Customizer settings) but don’t worry they are safe in the database but you will need to switch back to your parent if this is the case so you can copy your settings and migrate them over. In our Total theme we provide a useful Import/Export panel right in the dashboard so you can copy your theme Customizer settings prior to switching to your child theme and migrate them over.
Additionally if you are using your child theme to provide additional function to your site rather then using a plugin if you ever switch your parent theme you may have to move some these tweaks over to a new child theme, rename your current child theme or move the tweaks into a custom plugin.
How To Create A WordPress Child Theme?
I want to assume you are proactive and have created a folder and “the special” style.css file for your child theme. If you just skipped to this part (or were eagerly waiting for this section), please open your WordPress themes directory via FTP/SFTP (…/wp-content/themes) and create a folder where you will store your child theme.
Note: You can access the themes directory via your File Manager in your cPanel. Alternatively, you can use a FTP client such as FileZilla if you have FTP accounts enabled.
Next, open your favorite text editor (mine’s Notepad++) and create a style.css file with the following info:
/*
Theme Name : The name of your child theme (e.g. Total Child Theme)
Theme URI: http://www.example.com (Your child theme’s URL)
Description: A brief description of your child theme
Author: Your name goes here
Template: Your parent theme directory name (e.g. Total, twentyfourteen, etc)
Version: 1.0.0
*/
It’s the same code we used earlier.
Upload your style.css file to the child theme’s folder. At this point, your style.css file is empty (apart from the above lines, which do nothing in terms of styling), so don’t expect your child theme to look anything like your parent theme. To overcome this hurdle though, you can import your parent theme’s style.css by creating a new empty functions.php file inside the child theme folder and adding the following PHP code:
function total_child_enqueue_parent_theme_style() {
// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
$theme = wp_get_theme( ‘Total’ );
$version = $theme->get( ‘Version’ );
// Load the stylesheet
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’, array(), $version );
}
add_action( ‘wp_enqueue_scripts’, ‘total_child_enqueue_parent_theme_style’ );
Make sure to change where it says “Total” to be the name of your parent theme. This will allow your child theme to dynamically update the version number appended to the parent style.css so when the parent theme is updated if there were any changes to the style.css file in the parent theme it will let the browser and your CDN (if using one) re-cache the stylesheet and prevent your site from having CSS issues when viewed.
Customizing Your Child Theme
Now come the fun part. You most likely created your child theme to make customizations, so dive in!
To customize your child theme, just add your styles to the style.css file you created. They will override corresponding styles found in the parent theme.
To edit template files, copy them to your child theme first, and then edit them from there. But not ALL files can be copied over to your child theme and modified, you can only copy over template files. So if the theme has certain files inside for an includes, inc, functions or other folder which hold custom classes and functions you may not be able to copy those over and modify them. For those cases you may want to be looking at using filters or action hooks to modify the default parent theme functions.
You can add custom template files to your child theme for more functionalities
Use your child theme’s functions.php file to add custom functions and make use of parent theme or WordPress filters. Don’t add new functions to the functions.php file in your parent theme!
WordPress will load the template files and styles in your child theme first, but if something is missing, it will load the corresponding files in the parent theme. Oh yeah, child themes are fallback safe, but I bet we said that already.
And that’s it.
To wrap things up…
Child themes are very powerful as far customization and extensibility go. Moreover, they provide good learning grounds for anyone looking to learn WordPress theme development. They are simple and fun to create and give you plenty of options to turn your WordPress site whichever way you like.
Design away and have fun, and don’t leave before sharing with us in the comments below. We love and value your feedback!
