How to create Child Theme in WordPress?
In this post you will learn how to create a Child Theme in WordPress. But before creating a child theme we have to know about child theme.
What is a Child Theme?
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme without making any changes to the parent theme itself. Child themes are mainly used for modifying an existing theme. Child themes are used when you want to customize an existing WordPress theme without losing the ability to upgrade that theme.
Benefits of using Child Theme:
a. The functions.php of a child theme is loaded in addition to the parent’s functions.php. That means it is loaded just before parent’s file. In that way, the functions.php of a child theme provides a smart method of modifying the functionality of a parent theme.
b. If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
c. Designers and developers use child themes to speed up their development.
d. Creating a WordPress child theme can be as simple as creating a new style.css file in a new folder. All you really need is one line in your new style.css header that defines the template.
Steps for Creating a Child Theme from an Unmodified Parent Theme.
1. Firstly you have to create a child theme directory in WordPress wp-content/themes directory as named like ‘parentthemename-child’. For example if you are using twentyseventeen theme as parent theme then the name of your child theme will be like ‘twentyseventeen-child’. It is not mendetory, just recommended that the name of your child theme directory is appended with ‘-child’.You will also want to make sure that there are no spaces in your child theme directory name.In the screenshot below we have called our child theme ‘twentyseventeen-child’, indicating that the parent theme is the Twenty Seventeen theme.
2. After that open the child theme directory and create the stylesheet file named as style.css. The stylesheet must begin with the following code:
Stylesheet code
Theme Name: Twenty Seventeen Child
Theme URI: http://example.com/twenty-seventeen-child/
Description: Twenty Seventeen Child Theme
Author: Author Name
Author URI: http://example.com
Template: twentyfifteen
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: twenty-seventeen-child
*/
Things to notice:
a. example.com: you have to replace the example text with the details relevant to your theme.
b. Template: The Template line corresponds to the directory name of the parent theme. You may be working with a different theme, so adjust this line according to your parent theme name.
2. When this code is added to style.css file, the next step is to create functions.php file in same child theme directory. After creating functions.php file, the final step is to enqueue the parent and child theme stylesheets. In previous child themes @import method was used to import the parent theme stylesheet. But this method is no longer used because it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. The functions.php must be started with opening PHP tag, after which you can enqueue your parent and child theme stylesheets as given in the following code:
PHP code
add_action( ‘wp_enqueue_scripts’, ‘enqueue_styles_for_child_theme’ );
function enqueue_styles_for_child_theme() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>
Usage for this code…
a. wp_enqueue_scripts action: This function is used when enqueuing items that are meant to appear on the front end. It is used for enqueuing both scripts and styles.
b. wp_enqueue_style(); As the name suggests, this function is used to enqueue a CSS stylesheet.
c. get_template_directory_uri(); This function is used to retrieve theme directory URI.
3. The above code, is used to enqueue style.css of parent theme to inherit style effect of this file into child theme.If your child theme style.css contains its own CSS code, you will need to enqueue it as well. So the complete example becomes:
PHP code
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
$parent_style = ‘parent-style‘; // This is ‘twentyseventeen-style’ for the Twenty Fifteen theme.wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css‘ );
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css‘,
array( $parent_style ),
wp_get_theme()->get(‘Version‘)
);
}
?>
Usage for this code…
d. get_stylesheet_directory_uri(): This function is used to retrieve stylesheet directory URI for the current theme/child theme.
e. wp_get_theme(): This function gets a WP_Theme object for a theme.
4. After adding this code go to your WordPress admin dashboard and check your child theme in Appearance->Themes.
How to override template files of a plugin
Some of the plugins allows to override their template files. To override template files of a plugin in your child theme simply make a folder named as ‘plugin_name’ within your theme directory, and then create the folders/template file you wish to override within it.
Example:
Lets take an example of WooCommerce plugin. In this plugin we are going to override the price template for the single product page to add a notice. this template file is located at: wordpress\wp-content\plugins\woocommerce\templates\single-product\price.php.
To override price.php, copy price.php to the following location: wordpress\wp-content\themes\twentyseventeen-child\woocommerce\templates\single-product\price.php. Open the file up and make whatever changes you require. Here we are going to add a notice about the price:
/**
* Single Product Price
*/
global $post, $product;
?>
<p class=“price”><?php echo $product->get_price_html(); ?></p>
<p>Notice: price shown excludes tax and shipping.</p>
Using this simple technique you can override a vast amount of template files, in a reasonably upgrade-safe manner.
Leave a comment