A child theme gives you access to change small aspects of your site’s appearance yet still preserve your theme’s look and functionality. before create child theme we need to understand how child themes work it is first important to understand the relationship between parent and child themes.
you can read this article for child theme What is child theme?
Child themes:
- keep customization separate from parent theme functions easily.
- allow parent themes to be updated without destroying your modifications.
- make your modifications portable by using child theme.
- gives you to take advantage of the effort and testing put into parent theme without affecting the parent theme.
How to Create Child Theme
1. Create a child theme folder first
First, create a new folder in your themes directory, located at wp-content/themes by using FTP or directly to your server panel.
The directory needs a name to remember easily. The best practice to give a child theme the same name as the parent theme, just use “-child” appended to the end. For example, if you were making a child theme of twentytwenty theme, then the directory would be named twentytwenty-child.
2. Create a stylesheet: style.css
Next, you need to create a stylesheet file name it style.css, which will contain all of the CSS rules and declarations that control and gives the look of your theme.
Your stylesheet must have contain the below required header comment at the very top of the file of style.css. This basically tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent theme.
/*
Theme Name: Twenty Twenty Child
Theme URI: http://example.com/twenty-twenty-child/
Description: Twenty Twenty Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentytwenty
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: twentytwentychild
*/
The following information is required for any child theme:
i. Theme Name – needs to be unique to your parent theme
ii. Template – the name of the parent theme directory. The parent theme in our example is the Twenty Twenty theme, so the Template will be twentytwenty. You may be working with a different theme, so check before doing.
3. Enqueue stylesheet in your functions.php
The final step is to enqueue the parent and child theme stylesheets by using functions.php.
The recommended way of enqueuing the parent theme stylesheet currently is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your created child theme’s functions.php.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
If your child theme style.css contains actual CSS code, you will need to enqueue it as well in the functions.php. But setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme you created. The complete (recommended) code example is:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentytwenty-style' for the Twenty Twenty 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')
);
}
**where parent-style is the same, $handle used in the parent theme when it registers it’s stylesheet.
I hope this post will help you to learn and create child theme 🙂
