How to Create a Child Theme in WordPress

A child theme allows you to safely customize your WordPress site without altering the parent theme’s core files. This way, you can update the parent theme anytime without losing your changes.

Step 1: Activate a Parent Theme

Before creating a child theme, make sure the parent theme (e.g., Hello Elementor) is installed and activated.

Step 2: Create a Child Theme Using a Plugin

The easiest way is to use the plugin Child Theme Configurator:

1. Install and activate the plugin.
2. Go to Tools → Child Themes in your WordPress dashboard.
3. Select the parent theme (e.g., Hello Elementor) and click Analyze.
4. After the analysis, click Create New Child Theme.
5. The plugin will generate your child theme automatically.

Step 3: Create a Child Theme Manually

If you prefer manual setup, create the following folder and files inside /wp-content/themes/:

hello-elementor-child/
│
├── style.css
├── functions.php
└── assets/
├── css/
│ └── custom.css
└── js/
└── custom.js

style.css

Every child theme must have a style.css file with header information:

Theme Name: Hello Elementor Child

Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash( parents theme link)

Template: hello-elementor

Author: Elementor Team

Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash (author url parents theme link)

Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.

Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready

Version: 3.4.4.1759238307

Updated: 2025-09-30 13:18:27

functions.php

This file loads the parent and child stylesheets and scripts:

<?php
// Exit if accessed directly
if ( !defined( ‘ABSPATH’ ) ) exit;

// Load parent theme stylesheet
if ( !function_exists( ‘child_theme_configurator_css’ ) ) :
function child_theme_configurator_css() {
wp_enqueue_style(
‘chld_thm_cfg_child’,
trailingslashit( get_stylesheet_directory_uri() ) . ‘style.css’,
array( ‘hello-elementor’,’hello-elementor-theme-style’,’hello-elementor-header-footer’ )
);
}
endif;
add_action( ‘wp_enqueue_scripts’, ‘child_theme_configurator_css’, 10 );

// Load extra CSS & JS
function hello_child_enqueue_assets() {
// Extra CSS
wp_enqueue_style(
‘hello-child-custom-css’,
get_stylesheet_directory_uri() . ‘/assets/css/custom.css’,
array(‘chld_thm_cfg_child’),
wp_get_theme()->get(‘Version’)
);

// Extra JS
wp_enqueue_script(
    'hello-child-custom-js',
    get_stylesheet_directory_uri() . '/assets/js/custom.js',
    array('jquery'),
    wp_get_theme()->get('Version'),
    true
);

}
add_action( ‘wp_enqueue_scripts’, ‘hello_child_enqueue_assets’, 20 );

Step 4: Customize Your Child Theme

• Add custom styles in assets/css/custom.css.
• Add custom JavaScript in assets/js/custom.js.
• Use functions.php to override or extend the parent theme functionality.