Site icon techieswiki

What is child theme in WordPress or in Woocommerce and how to create it?

As you know WordPress theme is used to specify the look and feel of your website. It defines the layout of your website. It is more about the presentation of the content than the actual content. To change the layout or design, we can edit the themes CSS files or PHP files. But when a new update comes for the particular theme we have to do the same code again. To overcome this we use Child themes. It will inherit all the features of the parent theme and we will be able to customize the parent theme without making changes in the parent theme. Since child theme is different from the parent theme so changes are not lost when parent theme is updated.

How to create a Child Theme?

Go to your theme directory and create a new folder with a name you like.  Here I want to inherit the features of Twenty Seventeen theme. So I created a folder with TwentySeventeen-child and created style.css and functions.php files in it.

functions.php & Style.css

To display the child theme under Appearance -> Themes tab in the admin area, we need to follow some basic steps. In a style.css file, you need to specify which is the parent theme and other basic details for your theme like version, author etc.  Parent theme name is mandatory and you need to specify the folder name of the parent theme. in my case, it is twentyseventeen, and my style.css file will look like below.

/*
Theme Name: TwentySeventeen Child
Template: TwentySeventeen
Version: 1.0.0
Theme URI: 
Author: Admin
Author URI: 
Description: Simple child theme
License: 
License URI: 
Text Domain: 
Tags:
*/

Then in functions.php, we need to enqueue the style by using the below code.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

function enqueue_child_theme_styles()
{
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Now you should be able to see the child theme in your admin is like below. To add an image for the theme, you just need to place an image with name screenshot.png in your child theme directory.

WordPress child theme
Child theme details

Click on Activate to enable your child theme. Now you can use the different action hooks and filters which is available in WordPress or Woocommerce to customize your website design without affecting the parent theme.

Read how to create a top bar in WordPress or Woocommerce using child theme here.

Hope this helps you to start with a child theme. let me know your feedback in the comment section below.

Exit mobile version