How to Create a Child Theme in WordPress the Easy Way

Sooner or later, most WordPress sites need a small code change: a custom function, a tweak to a template, or a snippet from a tutorial. If you add that code directly to your theme, the next theme update erases it. A child theme solves this problem by keeping your changes in a separate theme that inherits everything from the original.

This guide explains what a child theme is, when you actually need one with Elementor, and how to create one step by step.

What a Child Theme Is

A child theme is a small theme that sits on top of a parent theme. WordPress loads the parent's templates, styles and functions, then applies anything in the child theme on top. When the parent theme updates, your child theme stays untouched, so your custom code survives.

A child theme can contain as little as two files: a style.css file that names the parent, and a functions.php file for your custom code.

Do You Need a Child Theme With Elementor?

Not always. If you design everything in Elementor and the Theme Builder, your layouts live in the database, not in theme files, and theme updates do not affect them. Custom CSS can go in Elementor or the Customizer. Our guide on four ways to add custom CSS and code covers those options.

You do need a child theme when you:

• Add PHP functions, such as custom post types, shortcodes or hooks.
• Override theme template files.
• Add translations or text changes to theme files.
• Want a clean place to keep code that belongs to the site, not to a plugin.

If your only change is a single snippet, a code snippets plugin can be an alternative. For sites you maintain long term, a child theme keeps things organized.

Step 1: Create the Child Theme Folder

Connect to your site with your hosting file manager or SFTP and open wp-content/themes. Create a new folder named after the parent with a suffix, for example hello-elementor-child. Use lowercase letters and hyphens, no spaces.

Step 2: Add style.css

Create a file called style.css in the new folder with this header:

/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
Description: Child theme for custom code
*/

The Template line is the most important part. It must exactly match the folder name of the parent theme, not its display name. If it is wrong, WordPress reports the child theme as broken.

Step 3: Add functions.php and Load Styles

Create functions.php and load the child theme's stylesheet after the parent's:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
}, 20 );

Some parent themes already load the child stylesheet automatically. If your styles appear twice, remove this function. Never close the PHP tag at the end of the file; trailing spaces after a closing tag can cause errors.

Step 4: Add a Screenshot (Optional)

Add an image called screenshot.png, ideally 1200 by 900 pixels, so the child theme is easy to recognize in Appearance, Themes.

Step 5: Activate the Child Theme

Go to Appearance, Themes and activate the child theme. Your site should look exactly the same, because it still uses the parent's design and your Elementor templates. Check a few pages. If menus or widget areas changed, reassign them under Appearance.

Step 6: Add Your Custom Code Safely

• Add one change at a time and test it.
• Comment your code so you remember why each function exists.
• Back up before editing, and edit through SFTP or the file manager rather than the dashboard editor, so a typo cannot lock you out.
• If something breaks, the site may show a white screen. Our guide on fixing the WordPress white screen explains how to recover.

Overriding Template Files

To change a parent template, copy the file into the child theme using the same folder structure, then edit the copy. WordPress uses the child's version. Keep overrides to a minimum, because when the parent updates its template, your copy does not receive the improvements.

Child Theme Best Practices

• Keep the child theme small: custom functions, minimal CSS and necessary overrides only.
• Store site design in Elementor, global styles and classes, not in large CSS files.
• Use version control or keep dated backups of the child theme files.
• Document what each function does, especially on client sites.
• Test changes on staging first. See creating a WordPress staging site.

When a Plugin Is Better Than a Child Theme

Functionality that should survive a theme change, such as custom post types or business logic, often belongs in a small custom plugin rather than the theme. If you switched themes tomorrow, would you still need this code? If yes, a plugin is the better home.

Useful Things to Put in a Child Theme

• Custom image sizes registered with add_image_size for cards and thumbnails used across the site.
• Small hooks and filters, such as changing the excerpt length or adding a custom class to the body tag.
• Shortcodes that output dynamic information you reuse in several places.
• Translations of theme text that cannot be changed from settings.
• Font loading or preconnect tags when they are not handled by Elementor settings.

Common Child Theme Mistakes

• Wrong Template value, using the theme's display name instead of its folder name.
• Copying the parent's entire functions.php into the child, which causes duplicate function errors.
• Editing files through the dashboard editor without a backup.
• Overriding many template files, which then miss important parent updates.
• Putting large amounts of design CSS in the child theme instead of using Elementor's global styles and classes.

Frequently Asked Questions

Will a child theme slow down my site?

No. Loading one extra small stylesheet has a negligible effect. Performance depends far more on images, plugins and hosting.

Can I create a child theme for any theme?

Most themes support child themes. Some themes ship with a ready-made child theme you can download from the developer, which is the easiest starting point.

Can I switch to a child theme on an existing site?

Yes. Elementor layouts are unaffected. You may need to reassign menus and Customizer settings, so take a backup and check key pages after activating.

Do I lose my child theme changes when the parent updates?

No. That is the whole point. Only files in the parent folder are replaced. Your child theme files remain exactly as you left them, although you should still test after big parent updates in case a function you rely on changed.

Wrapping Up

A child theme keeps your custom code safe from theme updates. Create a folder with a style.css that names the parent and a functions.php for your code, activate it, and add changes one at a time with backups and testing. With Elementor handling the design, your child theme stays small, clean and easy to maintain.

Related tutorials

• Four Ways to Add Custom CSS and Code in Elementor
• Writing Custom CSS in Elementor the Right Way
• How to Fix the WordPress White Screen of Death