While making modifications to the theme’s PHP, CSS or others files in WordPress, the changes might not stay after it is updated. Automated updates will definitely remove all the previous files and bring in new updated ones. Since the files are all new, they should be edited again.
To prevent it, the child theme feature of WordPress comes into use. It can be setup to use all the designs and features of the parent theme. Then additional editing can be done and new files can be added to make the original one behave and look different. That means additional functions can be added to the child’s function.php file, additional CSS styles can be added to a different style.css file and new files can be placed in a separate folder which modifies the original functionality and display features of the parent theme.
The Purpose of a Child Theme
The purpose of having a different folder for a child theme comes into use when the original one is updated. The original folder’s files are all updated by replacing them. But the child folder is left untouched. That means it will continue to use the parent folder’s files and the features that come along with them.
Directory for the Child Theme
A child theme like the parent is present in directory /wp-content/themes/. But both of them will have their separate folder.
For example: The theme twentyfifteen is in the folder /wp-content/themes/twentyfifteen/ and its child can be in any other folder like /wp-content/themes/twentyfifteen-child/. The name of the folder can be anything, but if we use the original folder name along with -child as the name, it can be easily identifiable.
Setting Up a Child Theme
First and foremost, to create a child theme, we need to have a folder for it. In the folder, two basic files style.css and functions.php is required. They will have some basic instructions and special lines of code.
To quickly create one:
- Create a new folder with a conventional name in the directory /wp-content/themes/.
- Then in the folder, create a style.css file and place the following code (with your own values):
[css]/*
Theme Name: Twenty Fifteen Child Theme
Theme URI: http://www.yoururl.com/theme/
Description: Child Theme of Twenty Fifteen
Author: WP Craze
Author URI: http://www.wpcraze.com
Template: twentyfifteen
Version: 1.0.0
*/[/css] - Make sure to put the value of Template: with the exact folder name of the parent theme. In this case it is twentyfifteen.
- Create another file functions.php and add the following code to load the parent’s CSS
[php]<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );
function enqueue_parent_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
?>[/php]
Activating and Using the Child Theme
The basic setup for the child theme is complete. Next, you need to set it as the default one from the admin dashboard. Visit WordPress administration for your website and go to Appearance > Themes. Your child theme will appear there. Hover over it and click on Activate.
Adding Files to the Child Theme
Simply add any files: PHP, CSS into the new folder. Those files can contain modified instructions that WordPress should follow. It will always override the content of the original folder.
For example: If the parent theme’s CSS has the body selector’s margin set to 10px and the child theme sets it to 20px then WordPress will make sure that the child’s style will have precedence over the parent. Similarly, if the same function name is defined in function.php of the child theme, it will have precedence over the original function present in the other function.php file found in original folder. The same rule applies to any other files like single.php and its contents which can be created in the new folder.
Getting Directory using PHP
For parent theme
[php light=”true”]<?php echo get_template_directory_uri() ?>[/php]
It will get the directory like: /wp-content/themes/twentyfifteen/
For child theme
[php light=”true”]<?php echo get_stylesheet_directory_uri() ?>[/php]
It will get the directory like: /wp-content/themes/twentyfifteen-child/