WordPress Child Themes — Why You Need Them and How to Create One

In this tutorial, you'll learn why child themes are essential for WordPress development — how to create one, override parent templates, add custom styles, and update the parent theme safely without losing your customizations.

What You'll Learn

• What a child theme is and how it inherits parent theme functionality
• Why child themes are essential (safe updates, customization preservation, easy rollback)
• Creating a child theme folder, style.css with Template header, and functions.php
• Enqueuing parent and child styles correctly with wp_enqueue_style()
• Overriding template files by copying from parent to child
• Adding custom functions in the child's functions.php (loads before parent)
• Adding custom styles in the child's style.css (loads after parent)
• When NOT to use child themes (building from scratch, FSE themes)
• A complete child theme example with Twenty Twenty-Four

Why It Matters

Every WordPress developer must know child themes. Without a child theme, updating the parent theme overwrites all your customizations — layout changes, CSS tweaks, template modifications, all gone. Child themes separate your custom work from the original theme, so updates are safe. Clients can update their theme to the latest version without breaking the custom design you built. It is the professional standard for WordPress theme customization.

Real-World Use

A digital agency built a client site using a premium theme with extensive custom CSS, a modified single.php that adds a table of contents, and a custom page template for landing pages. Six months later, the client updates the premium theme for security patches. Without a child theme, all customizations are lost. With a child theme, the update applies to the parent, and all overrides in the child remain intact. The agency charges less for maintenance because child themes make updates safe and predictable.

Learning Path

flowchart LR
  A[Theme Anatomy] --> B[Installing Themes]
  B --> C[Full Site Editing]
  C --> D[Customizer]
  D --> E[Widgets]
  E --> F[Menus]
  F --> G[Child Themes]
  G --> H[Template Hierarchy]
  H --> I[CSS Customization]
  style G fill:#4a90d9,color:#fff

What Is a Child Theme?

A child theme is a WordPress theme that inherits the functionality, templates, and styles of another theme — the parent theme. The child theme only contains files that differ from the parent.

Think of it as a layer on top: the parent is the foundation, the child is the custom paint, furniture, and decorations. If the foundation needs repairs (parent update), you do not lose your paint.

Key Concept

WordPress checks the child theme first for any template file, function, or stylesheet. If the child has it, WordPress uses the child's version. If not, WordPress falls back to the parent's version.

Child has style.css? → Use child's style.css
Child missing style.css? → Use parent's style.css
Child has single.php? → Use child's single.php
Child missing single.php? → Use parent's single.php

Why Use Child Themes?

Safe Updates

When the parent theme releases an update, you apply it without fear. Your child theme's files are untouched. No lost customizations.

Customizations Preserved

All your CSS changes, template overrides, and additional functions remain intact because they live in the child theme.

Easy Rollback

If a parent update causes issues, disable the child theme temporarily and the site falls back gracefully. Or switch to a different parent while keeping the child's customizations.

Organization

Child themes keep your custom code separate from the third-party theme. When you hand off a project, the next developer knows exactly what is custom (the child) versus what came with the theme (the parent).

Creating a Child Theme

You need at least two files:

Step 1: Create the Theme Folder

Navigate to wp-content/themes/ and create a new folder:

wp-content/themes/
  twenty-twenty-four/                  (parent — already exists)
  twenty-twenty-four-child/            (child — create this)

Step 2: Create style.css

The child theme's style.css has a required Template header that tells WordPress which theme is the parent:

/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://example.com/tt4-child
Description: A child theme of Twenty Twenty-Four.
Author: Your Name
Author URI: https://example.com
Template: twentytwentyfour
Version: 1.0.0
License: GPL v2 or later
Text Domain: twentytwentyfour-child
*/

The Template: line is critical. It must match the folder name of the parent theme exactly (case-sensitive). If the parent folder is twentytwentyfour, the Template value must be twentytwentyfour.

Step 3: Create functions.php

The child theme's functions.php must enqueue the parent theme's stylesheet (and optionally the child's stylesheet):

<?php
function my_child_theme_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

This is the minimum viable child theme. Activate it from Appearance > Themes and verify it inherits the parent's appearance.

Enqueuing Parent and Child Styles Correctly

The correct pattern for loading both parent and child styles:

function my_child_theme_scripts() {
    // Enqueue parent style
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Enqueue child style, with parent-style as dependency
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

Key points:

• get_template_directory_uri() — Always points to the parent theme directory
• get_stylesheet_uri() — Always points to the active (child) theme directory
• The dependency array array( 'parent-style' ) ensures child CSS loads after parent CSS
• The version parameter wp_get_theme()->get( 'Version' ) uses the child theme's version for cache busting

Without the dependency declaration, child CSS may load before parent CSS, and your overrides will not apply.

Handling Additional Parent Stylesheets

If the parent theme enqueues multiple stylesheets (e.g., parent-style, parent-google-fonts), you can enqueue them in the child by using the same handles, or dequeue and re-enqueue them.

Overriding Template Files

To override any parent template file, copy it from the parent theme to the child theme using the same path and filename.

Example: Override single.php

1. Copy wp-content/themes/twentytwentyfour/single.php to wp-content/themes/twentytwentyfour-child/single.php
2. Edit the copied file in the child theme.
3. WordPress now uses the child's single.php instead of the parent's.

Template Parts

Override template parts the same way:

Parent:     twentytwentyfour/template-parts/content/content-single.php
Child:      twentytwentyfour-child/template-parts/content/content-single.php

Limitations

You cannot remove a parent template file by deleting it from the child. To undo an override, delete the copy from the child theme. WordPress then falls back to the parent.

Adding Custom Functions

The child theme's functions.php is loaded before the parent theme's functions.php. This means:

• You can remove parent theme actions by unhooking them
• You can override parent theme functions (if they are pluggable, wrapped in if ( ! function_exists() ))
• You can add entirely new functions

Removing a Parent Theme Action

function my_child_remove_parent_actions() {
    remove_action( 'after_setup_theme', 'parent_theme_function_name' );
}
add_action( 'after_setup_theme', 'my_child_remove_parent_actions', 0 );

The priority 0 ensures this runs before the parent's after_setup_theme hook at priority 10.

Overriding a Pluggable Function

If the parent theme wraps a function in function_exists():

// In parent theme's functions.php:
if ( ! function_exists( 'parent_theme_feature' ) ) {
    function parent_theme_feature() {
        // Default implementation
    }
}

// In child theme's functions.php:
function parent_theme_feature() {
    // Custom implementation — this runs instead
}

Most themes do NOT make functions pluggable. In that case, use remove_action() to unhook the parent's function and add your own.

Adding Custom Styles in Child's style.css

Any CSS in the child theme's style.css overrides the parent because:

1. The child style is enqueued after the parent style (via dependency)
2. CSS specificity rules apply as usual

/* Override parent theme's site title color */
.site-title a {
    color: #1a73e8;
}

/* Change primary button background */
.wp-block-button__link {
    background-color: #34a853;
    border-radius: 50px;
}

/* Add custom spacing to header */
.site-header {
    padding: 2rem 1rem;
}

Remember: CSS specificity matters. If the parent uses .site-header .main-navigation a and you use just a, your selector may lose. Match or exceed the parent's selector specificity.

When NOT to Use Child Themes

Child themes are not always the answer:

Building from Scratch

If you are building a completely custom theme, start from scratch or use a starter theme (Underscores, Sage). A child theme adds unnecessary inheritance overhead.

Full Site Editing (FSE) Themes

Block themes using FSE store template customizations in the database, not in template files. A child theme is less necessary because:

• Template overrides work the same way
• But most FSE customizations happen via the Site Editor UI and are stored in the database
• Global Styles changes via the UI also persist across parent theme updates

For FSE themes, you may still want a child theme if you are adding custom theme.json overrides or custom PHP functionality.

Minor CSS Only

If you only need a few CSS tweaks, use the Additional CSS panel in the Customizer instead. It is simpler and does not require theme switching.

Complete Child Theme Example with Twenty Twenty-Four

File Structure

twenty-twenty-four-child/
  style.css
  functions.php
  screenshot.png (optional, 1200x900)
  single.php (overridden)
  template-parts/
    content/
      content-single.php (overridden)

style.css

/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Version: 1.0.0
Text Domain: tt4child
*/

functions.php

<?php
function tt4child_enqueue_styles() {
    wp_enqueue_style( 'tt4-parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'tt4-child-style', get_stylesheet_uri(), array( 'tt4-parent-style' ), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'tt4child_enqueue_styles' );

function tt4child_custom_feature() {
    // Add custom theme support or custom functions here
    add_theme_support( 'custom-header' );
}
add_action( 'after_setup_theme', 'tt4child_custom_feature' );

single.php (override)

<?php
get_header();
while ( have_posts() ) : the_post();
    ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h1><?php the_title(); ?></h1>
        <div class="entry-meta">
            <span class="posted-on"><?php the_date(); ?></span>
            <span class="byline"> by <?php the_author(); ?></span>
        </div>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
    <?php
endwhile;
get_footer();

Activate the child theme. The site should look identical to Twenty Twenty-Four (because the child inherits everything). The overridden single.php adds the custom meta section above content.

Common Mistakes

1. Missing or incorrect Template header in style.css — The Template: value must match the parent theme's folder name exactly. If you misspell it or omit it, WordPress does not recognize the relationship and the theme may display a white screen.

2. Not enqueuing the parent stylesheet — Without wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ), the child theme loads with NO styles. The site appears unstyled.

3. Using get_stylesheet_uri() for parent assets — get_stylesheet_uri() returns the child theme's files. Always use get_template_directory_uri() for parent assets and get_stylesheet_uri() for child assets.

4. Copying the entire parent theme — A child theme should only contain files you customize. Copying everything defeats the purpose and makes updates harder.

5. Assuming all parent functions are overridable — Most theme functions are not pluggable. You cannot simply redefine a function in the child theme. Use remove_action() and add your own.

Practice Questions

1. What are the two required files for a child theme, and what critical information must each contain?

2. Why does the child theme's stylesheet need the parent style as a dependency when enqueuing?

3. How do you override a single post template from the parent theme in your child theme?

Challenge: Create a child theme for Twenty Twenty-Four with the following customizations: (1) Enqueue parent and child styles correctly, (2) Override the index.php to display posts in a grid layout (CSS Grid), (3) Override the header.php to remove the site tagline, (4) Add custom CSS to change link colors to green, (5) Add a custom function that displays "Last updated: [date]" below each post title. Activate and verify everything works. Then update the parent theme (simulate by changing the version number) and confirm all customizations survive.

FAQ

Mini Project

Build a comprehensive child theme for a classic parent theme:

1. Install a parent theme (e.g., Twenty Twenty-One or any classic theme of your choice).
2. Create a child theme with style.css and functions.php. Enqueue parent and child styles correctly with dependencies.
3. Override at least three template files: header.php (add a top announcement bar), single.php (add author bio box after content), footer.php (add custom copyright text).
4. In the child's functions.php:
   • Register a new widget area called "Under Header"
   • Display this widget area in the overridden header.php
   • Add a custom filter that appends "Read More" to post excerpts
5. In the child's style.css, completely restyle the following:
   • Site title: larger font, different color, uppercase
   • Navigation: different background, rounded menu items
   • Buttons: new color scheme with hover effects
6. Activate the child theme and verify all overrides work. Check that parent theme updates do not affect the child customizations.

What's Next

Now that you can customize any theme safely with child themes, master the template hierarchy to understand exactly which template file to override for any page type. Then refine your design with CSS customization techniques.