Why and How to create a child theme with WordPress
This documentation assumes an audience experienced with WordPress and web development, with intermediate to advanced skills php, css, html.
Why should you use a child theme?
Creating a child theme is the best way to start customizing any
WordPress themes. There is one major reason for that : you won’t loose any of your customizations when you’ll update the parent theme! If you edit directly the style.css or functions.php files of your theme, the update will just delete everything.
Keeping your theme up to date is highly recommended as it will guarantee an optimal security and fix bugs or browser compatibility issues.
Besides, using child themes is a good development practice : in your child theme you focus only on your added functionnalities, there are less files to edit and to maintain. If you come back to your code after a while, it is much easier to understand than having to dive into the parent theme and look for all your customizations in each php template and file…
How to create a child theme ?
1) First method with a ftp access for developers
Well, it is pretty simple. You need to create a folder and a file. In this example, we will create a child theme for the Customizr theme.
- Connect to your server via you FTP client and create a folder in the themes directory. You can name it as you want but without any spaces or special characters in the child folder name.
- Create a style.css file in this folder and copy and paste the following code in it. The important point here is to write the parent template parameter name ( Template : customizr ) in small letters, no cap letter, as it is case sensitive.
/* Theme Name: Customizr Child Theme URI: http://mysite.com/ Description: My description Author: Me Author URI: http://mysite.com/ Template: customizr Version: 1.0.0 */
2) Alternative method : with a plugin ( recommended for beginners )
You can use a plugin to create a child theme in one click. This works great and requires no coding or file transfer.
- Download and activate the Childify Me plugin
- Go to Appearance > Customize. There, you’ll see a new link added by the plugin in the text description’s footer. See screenshot below.
- Click on the button Childify Me
- Name your child theme
- Go back to Appearance > themes, find your freshly created child theme and activate it. You are done!
I strongly recommend this method for newbie as it is really simple, safe and fast.
Note : The Childify Me plugin creates a style.css and a function.php files. If you want to add custom functions in a functions.php file, new folder/files, you can either upload them by FTP or use the following plugin to easily manage your files right from admin :
http://wordpress.org/plugins/wp-filemanager/
How to override the parent theme's core functionalities with a child theme
Child theme overwrite logic
When a child theme is created and activated, WordPress compares all path/class-files.php. Each time a match is found, the child theme path/file will be used first and will override the parent theme file.
There is one exception though : the functions.php file is loaded in addition to and before the parent’s functions.php.
For example, if you create a index.php template in your child theme, it will overwrite the parent index.php template file.
Pluggable functions
The fact that the functions.php file of the child version is read just before the parent version can be very useful if you want to replace functions in the original functions file.
To enable this particular behaviour, the theme developers have to write their functions in specific way : this is what we call make the function pluggable :
A pluggable theme should have all its functions (in the functions.php file) wrapped like this :
if( ! function_exists('name_of_function') ) {
function name_of_function( $params ) {
// do some stuff with the $params }
}<br>
This gives child theme developers the ability to completely replace functions declared in the parent theme. By the time WP finds them in parent functions.php, they exist and get skipped (because of the function_exists() condition).
Let’s take an example
In most of the themes, the structure of the code is simple : at the root of the theme you have :
- style.css
- functions.php
- and the theme mandatory templates : index, header,footer, comments
All the rest of the code is very often organized in a folder tree starting for example with /inc or /includes.
Let’s say you need to overwrite the inc/class-content-slider.php file.
In your child theme, copy and paste the file class-content-slider.php in a folder inc/ you have previously created. It has to be the exact same path/file.
Now, you can do whatever customization you need in this file, it will overwrite the parent file.
If you need to modify a WordPress theme, as a best practice, I would rather recommend to use the actions and filters hooks of the theme, instead of copying and editing the core files.