How to Create a Child Theme in WordPress (Step-by-Step Beginner Guide)

Why You Need a WordPress Child Theme Before Customizing Anything

If you have ever spent hours customizing your WordPress theme only to watch every change vanish after an update, you already know the pain. A child theme is the solution. It lets you modify the look and behavior of your site while keeping the parent theme completely intact.

In this tutorial you will learn how to create a child theme in WordPress from scratch, without any plugin, in under 15 minutes. We will cover the two essential files, the correct way to enqueue styles, and the most common pitfalls beginners run into.

What Is a Child Theme (and How Is It Different From a Parent Theme)?

A parent theme is a complete WordPress theme with all the required template files, stylesheets, and functionality. A child theme inherits everything from the parent but allows you to override or extend specific parts without editing the parent files directly.

Feature Parent Theme Child Theme
Contains all template files Yes Only overrides
Survives theme updates No (changes are lost) Yes
Minimum required files Many 2 (style.css + functions.php)
Can be activated alone Yes No (needs parent installed)
wordpress theme files code editor

Why You Should Always Use a Child Theme

  • Update-safe customizations. Theme developers push updates for security and compatibility. Without a child theme, every update overwrites your changes.
  • Clean separation of concerns. Your custom code lives in its own directory, making debugging and version control much easier.
  • Easy rollback. If something breaks, you can simply switch back to the parent theme and start fresh.
  • Learning-friendly. You can experiment with template files and CSS without the risk of breaking the original theme.

What You Need Before You Start

  1. A working WordPress installation (local or live).
  2. A parent theme already installed (for example, Twenty Twenty-Five or any third-party theme).
  3. Access to your site files through FTP/SFTP or the File Manager in your hosting panel.
  4. A plain text editor such as VS Code, Sublime Text, or even Notepad.

That is it. No plugins are required for this method.

wordpress theme files code editor

Step-by-Step: How to Create a Child Theme in WordPress

Step 1: Create the Child Theme Folder

Navigate to wp-content/themes/ on your server and create a new folder. The naming convention is the parent theme slug followed by -child.

For example, if your parent theme folder is called flavor, name your child theme folder:

flavor-child

Keep the name lowercase with no spaces. Hyphens are fine.

Step 2: Create the style.css File

Inside your new child theme folder, create a file called style.css. This file must contain a specific header comment block so WordPress recognizes it as a theme.

Here is a working example:

/*
 Theme Name:   Flavor Child
 Theme URI:    https://example.com/flavor-child/
 Description:  Child theme for the Flavor theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     flavor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  flavor-child
*/

Important: The Template line must exactly match the folder name of the parent theme, not the display name. This is the most common mistake beginners make.

Step 3: Create the functions.php File

Create a second file in the same child theme folder called functions.php. This file is where you will enqueue the parent theme’s stylesheet and add any custom PHP later.

Add the following code:

<?php
// Enqueue parent and child theme styles
function flavor_child_enqueue_styles() {
    wp_enqueue_style(
        'flavor-parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'flavor-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'flavor-parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'flavor_child_enqueue_styles' );

What This Code Does

  • get_template_directory_uri() points to the parent theme folder.
  • get_stylesheet_directory_uri() points to the child theme folder.
  • The third parameter (array( 'flavor-parent-style' )) makes sure the child stylesheet loads after the parent stylesheet so your overrides take effect.

Note: Some parent themes already enqueue their own stylesheet with a specific handle. If you notice duplicate CSS loading, check the parent theme’s functions.php to find the exact handle and use it as your dependency instead.

Step 4: Install and Activate the Child Theme

You have two options:

  1. FTP upload: Upload the entire flavor-child folder to wp-content/themes/.
  2. WordPress dashboard: Zip the child theme folder, go to Appearance > Themes > Add New > Upload Theme, and upload the zip file.

Once uploaded, go to Appearance > Themes, find your child theme, and click Activate. Your site should look exactly the same as before because the child theme inherits everything from the parent.

Step 5: Verify It Works

Open your child theme’s style.css and add a quick test rule at the bottom of the file:

body {
    border-top: 4px solid red;
}

Refresh your site. If you see a red border at the top, the child theme is loading correctly. Remove the test rule when you are done.

How to Customize Your Child Theme

Overriding CSS

Add any custom CSS rules in your child theme’s style.css below the header comment. Because the child stylesheet loads after the parent, your rules will take priority.

Overriding Template Files

Want to change the layout of a specific page? Copy the template file from the parent theme folder into your child theme folder, keeping the exact same file name and subfolder structure. Then edit the child theme copy.

For example, to override header.php:

  1. Copy wp-content/themes/flavor/header.php
  2. Paste it into wp-content/themes/flavor-child/header.php
  3. Edit the child theme version as needed

WordPress will automatically use the child theme’s version instead of the parent’s.

Adding Custom Functions

Any PHP snippets, custom post types, shortcodes, or hook callbacks can go into your child theme’s functions.php. Unlike template files, the child theme’s functions.php does not override the parent’s. Both files are loaded, with the child’s loading first.

wordpress theme files code editor

Common Pitfalls and How to Avoid Them

Mistake What Happens How to Fix
Wrong Template value in style.css WordPress cannot find the parent theme. The child theme will not appear or will throw an error. Make sure the value matches the parent theme’s folder name exactly (case-sensitive).
Using @import in style.css to load parent styles Slower page load. This method is outdated and discouraged by WordPress. Use wp_enqueue_style() in functions.php as shown in Step 3.
Duplicated stylesheets loading The parent CSS loads twice, increasing page weight. Check if the parent already enqueues its own stylesheet. If so, you only need to enqueue the child stylesheet with the parent handle as a dependency.
Forgetting the opening <?php tag in functions.php PHP code is rendered as plain text on the page. Always start functions.php with <?php. Do not add a closing ?> tag.
Editing the parent theme directly “just this once” Changes are lost on the next theme update. Always make changes in the child theme, no exceptions.

Child Theme File Structure at a Glance

After completing the steps above your folder should look like this:

wp-content/
  themes/
    flavor/              (parent theme - do not edit)
    flavor-child/        (your child theme)
      style.css
      functions.php

As you grow more comfortable, you can add template overrides, a screenshot.png (recommended size: 1200 x 900 px) to display a thumbnail in the dashboard, and additional folders like /js or /images.

wordpress theme files code editor

Can You Use a Plugin Instead?

Yes. Plugins like Child Theme Configurator or the WP Child Theme Generator tool can create the required files for you. These are fine for quick setups, but understanding the manual process gives you full control and helps when you need to debug issues. If you are serious about WordPress development, learning the manual method is well worth the effort.

Quick Recap

  1. Create a new folder inside wp-content/themes/.
  2. Add a style.css file with the required header (including the correct Template value).
  3. Add a functions.php file that enqueues both parent and child stylesheets.
  4. Upload, activate, and verify.
  5. Start customizing safely.

Frequently Asked Questions

What is the difference between a theme and a child theme?

A theme (parent theme) is a complete set of files that control the design and functionality of your WordPress site. A child theme depends on a parent theme and only contains the files you want to change. It inherits everything else automatically.

Why do we create a child theme in WordPress?

The main reason is to make your customizations safe from theme updates. When the parent theme is updated, your child theme files remain untouched, so you never lose your work.

Can I create a child theme without a plugin?

Absolutely. You only need two files: style.css and functions.php. The entire process is covered in the step-by-step section above and takes just a few minutes.

Do I need to copy all parent theme files into the child theme?

No. Only copy the specific files you want to modify. WordPress will automatically fall back to the parent theme for any file not found in the child theme.

Will my child theme break if the parent theme is updated?

In most cases, no. However, if the parent theme makes major structural changes to a template file you have overridden, you may need to update your child theme copy to match. This is rare but worth checking after significant parent theme updates.

How do I add custom JavaScript to my child theme?

Create a /js folder inside your child theme directory, add your script file there, and enqueue it in your child theme’s functions.php using wp_enqueue_script().

Can I use a child theme with any WordPress theme?

Yes, child themes work with virtually any well-coded WordPress theme, including popular themes like Flavor, Flavor, Flavor, flavor flavor, flavor flavor, flavor flavor, flavor flavor, flavor, flavor flavor, flavor or any theme following WordPress coding standards. Block themes (FSE themes) also support child themes, though the customization workflow differs slightly when using the Site Editor.

Recent Posts

No Posts Found!

Categories

Tags

    Subscribe

    You have been successfully Subscribed! Ops! Something went wrong, please try again.

    About Us

    Express Jam Studio was founded in 2004 by John Smith. John had previously worked for a courier company, but he saw an opportunity to start his own business in the web design and development industry.

    Contact Info

    Copyright © 2022 Express Jam Studio. All Rights Reserved.