Guide to creating and using child theme in WordPress
If you have ever used WordPress to build websites, knowing about and using Child Theme is essential. Child Theme is a child theme created and inherits all the characteristics and functions of the parent theme (Parent Theme).
Copy and modify accordingly in child theme
Display has been changed when modified in child theme
Note: to use child theme you need to activate it in Appearance -> Themes
Through this article sharing how to use Child Theme, I hope it will help those who are and will use WordPress to be able to apply and customize themes to suit your work and avoid losses when you have made modifications.
- Why use Child Theme When using a WordPress theme, if you want to modify and change functions to suit your work requirements, it is necessary. However, these modifications may be lost if you edit directly and when the theme updates. Recovery and debugging can be quite difficult. The purpose of using Child Theme is to help you customize the theme as you wish without losing these customizations when the theme is updated.
- How does Child Theme work?
- When you use a child theme, you need to create a directory and file structure similar to the Parent Theme. Based on that structure, when you use a child theme, files in the child theme directory will be executed. If the child theme directory doesn't have that file, the file from the Parent Theme will be executed.
- Note: the style.css file and functions.php file will be executed in parallel, meaning you can write additional functions in the child theme.
- How to create a child theme Example: We have a WordPress theme called haru-circle and we need to create a child theme called haru-circle-child. The file structure is as follows:

- functions.php: you can write additional PHP functions for your site's functionality
- style.css: write additional custom CSS code
- templates folder: depending on each theme, this folder may or may not exist. These are WordPress display templates (copy corresponding files from Parent Theme to child theme according to the folder structure) style.css file details
/*
Theme Name: Haru Circle - Child
Theme URI: http://harutheme.com/circle
Author: HaruTheme
Author URI: http://harutheme.com/
Description: This is child theme of Haru Circle
Template: haru-circle
Version: 1.0.0
*/
/*---------------------------------
Write your css code from here
------------------------------------*/
functions.php file details
<?php
/**
*
* [Haru Circle] child theme functions and definitions
*/
function haru_child_theme_enqueue_scripts() {
wp_enqueue_style( 'haru-theme-child-style', get_stylesheet_directory_uri(). '/style.css', array('haru-theme-style') );
}
add_action( 'wp_enqueue_scripts', 'haru_child_theme_enqueue_scripts', 12 );
?>
Depending on how the style.css file is declared in the parent theme, you will need to make changes:haru-theme-style(this is the declaration of the style.css file in the parent theme) Example code in parent theme
Copy and modify accordingly in child theme
Display has been changed when modified in child theme
Note: to use child theme you need to activate it in Appearance -> Themes
Through this article sharing how to use Child Theme, I hope it will help those who are and will use WordPress to be able to apply and customize themes to suit your work and avoid losses when you have made modifications.