How to create and use a WordPress Child theme
A WordPress child theme is a theme that inherits the parent theme appearance and all of its functions. Using a child theme could help you make any adjustment or modification of a theme without breaking it or losing your customizations when it is upgraded.
Most designers and developers use this method to work with a commercial WordPress theme. If you want to customize a theme by editing or changing its files, then when the theme is updated, your last edit will be lost. So using a child theme is helpful for developers who want to customize the theme by extending parent theme’s functions, adding more features to parent theme too. Their adjustments or customizations will remain after upgrading the parent theme.
If you want to make some small changes such as adding some small styles to the theme, using a child theme is not a good idea. However, if you plan to make many changes, especially overriding theme functions, creating a child theme is definitely a correct method.
How to create WordPress child theme
** Parent theme should be installed before creating a child theme
The most important thing when using a child theme is that you must have a parent theme and the child theme completely works based on the parent theme. A child theme should include a style sheet file and a funnctions.php file and placed in the child theme’s folder. In order to create a child theme, let see below simple steps :
1. Create a child theme folder : The most simple way is using parent theme name and append with -child at the end of the folder name. For example, we use tinyblog as parent theme, so the child theme folder will be tinyblog-child
2. Create styles.css ( stylesheet file )
The next step is creating a stylesheet file which is named as style.css. It is necessary to add all parent stylesheet code here, we just only declare theme information which allows WordPress to know this is a child theme which is extended from a parent theme.
This css file is the most important file to define your child theme and it should be placed in the child theme folder. Style.css file should includes following lines
Theme name * : The name for your child theme and it will be displayed within the Appearance area in WordPress backend.
Theme URI. This is URI which points to the website or demo page for the theme. It should contain the author’s URI in order for the theme to be accepted into the WordPress directory.
Description *: A description for your child theme, it should include some words which let you know about the theme.
Author *: You could use your name here.
Author URI. Add your website here. It should be the name of your website and used as a part of the theme’s URI.
Template *: This is important information, you should add the parent theme’s name here. Easiest way is using the parent theme folder name or open style.css file in the parent theme folder and get the correct name. Using the wrong name could bring the issue while installing the child theme, and it could not work.
Version *: The version for your child theme, you can just use 1.0 for version.
License : License for your child theme, please check in style.css file of parent theme and copy its version here.
License URI : Please add URI where license is explained or just copy it from parent theme.
Tags : Add some tags which specific your child theme features
Text domain : In WordPress is used for localization and translation, you can use “slug” of your theme as text domain
* This is required line, you can ignore the others
Example of child theme style.css file /* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ description: >- Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
2. Create functions.php
Normally, functions.php file in a theme could be used to add functions or features to a WordPress website. Using this file in a child theme could help developers to override parent theme functions or adding WordPress or PHP functions to the file to customize the website features.
You just only need to create a file in the child theme folder and name it as functions.php. The file should contain a PHP open tag at the beginning of the content.
3. Inherit parent styles
Creating a stylesheet file just only lets WordPress website know your child theme is a theme that is extended from a parent theme, but it does not actually load the parent theme’s style. To make your child theme load parent theme styles, you should import or enqueue parent theme style.css file.
There are two method to inherit parent styles in your child theme :
Import parent theme style.css file using css importing method : by using CSS @import methods, you allow WordPress load parent theme and use it styles. Let see our example to know how to load parent theme styles.css
@import url("../twentyfifteen/style.css");
However, this method is quite old and it could affect website performance. So it is not recommended and you can use loading parent theme stylesheet by using functions.php file
load the parent’s style sheet using wp_enqueue_style() – recommended : by using this method, you should have functions.php file and parent style.css file will be inherited by WordPress wp_enqueue_style function. Below is an example of using the function to load parent theme stylesheets.
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
4. Installing child theme:
Installing a WordPress child theme is the same as installing a normal theme, you can install by uploading a zip file within WordPress backend or uploading to wp-content/themes folder using a FTP client software.
5. Advanced Customization :
There are some advanced customization you can apply with child themes, such as override theme file, loading additional CSS and js file, adding more widgets, etc.
Overriding theme file is the method in which you add a file with the same name and folder with the parent theme. By using this method, modifications can also apply for a file instead of only a function.
Another additional customization is loading additional CSS or js files using WordPress enqueue functions in child theme functions.php file.
Instead of creating a new theme from scratch, a developer can use a familiar and good theme to build a website with a lot of customization ability. As you can see, a child theme is a very simple and powerful method to adding modifications, overriding existing features to a theme, especially a commercial theme. It is also speeding up your development progress with a website too.
In addition, without touching on the core files of the original theme, you can safely update the parent theme and do not worry about losing your customization.
However, if you want to override parent theme functions or files, you must learn more on how the theme works and also know about the theme’s structure too.
