What is a Child Theme in WordPress?
A wordpress child theme is just another wordpress theme where it mimics and inherits all the functionalities and design of another existing theme in a wordpress system, which then be called the parent theme.
What is the purpose of creating wordpress child themes?
Though it will look and functions like the existing parent theme in wordpress, which really sounds redundant and a waste of disk space. Well think again, when the child theme inherits the look and feel of the parent theme, you can edit the child theme in any way you want without touching the actual files of the parent theme. So if something will go wrong, it won’t affect and compromise the parent theme.
How to create a wordpress child theme?
Just need 3 simple steps in to create a child theme.
1. Create a directory with any file name you want, and save it in the themes directory (NOT inside the parent theme directory).
2. Copy the header information of the style.css of the parent theme to your child theme and edit the header information ( see code below ).
3. Import the parent theme css in you child theme style.css file. ( see code below ).
And that is it, you are good to go.
/* Theme Name: Your desired child theme name Theme URI: any url, it could be your personal website url Description: A short description about your child theme Author: It could be your name. Author URI: any url, it could be your personal website url Template: parent theme's directory name Version: you version */ @import url(../parent-theme-folder/style.css); /* You can start adding your css here */
You may not completely fill out all the header information EXCEPT “Template:”. It is crucially required and strictly case sensitive; It should reflect the parent theme’s directory name in there.
That’s the easy way but also the “not-so” proper way to do it.
The right way of doing the third step is by utilising the wp_enqueue_style() WordPress function. Instead of importing the parent theme’s style.css file, you need to create a new file in your child theme and name it as functions.php . Now, use the wp_enqueue_scripts WordPress hook to load the parent theme style.css to your theme.
Refer to the code below:
<?php
/**
* Loads the parent stylesheet.
*/
function get_parent_stylesheet() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'get_parent_stylesheet' );
?>
ADDITIONAL POINTS:
It is optional to copy all the other files in the parent theme into the child theme directory. Just bear in mind that, whenever you want to edit something, always copy the file which you want to edit from the parent theme to the child theme then you can now edit it inside the child theme. Never touch any files in the parent theme because if you do so, it will defeat the purpose of having a child theme.