Skip to main content

WordPress Child Themes: Concept and Implementation

Duration: 45 minutes
Module 4: Session 4.6

Learning Objectives

  • Understand the concept and importance of child themes
  • Learn how child themes inherit from parent themes
  • Create a basic child theme structure
  • Override parent theme files and functions
  • Enqueue styles and scripts properly
  • Customize templates and functionality safely
  • Maintain child themes through parent updates
  • Apply best practices for child theme development

What is a Child Theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way to modify an existing theme because they preserve your customizations when the parent theme is updated.

🔑
Golden Rule
Never modify a theme directly unless it's a custom theme you've built yourself. Always use a child theme for modifications to preserve your changes during updates.

Parent-Child Theme Relationship

Parent Theme

Original theme files

  • All template files
  • Functions.php
  • Style.css
  • Assets & Scripts
→
Inherits

Child Theme

Your customizations

  • style.css (required)
  • functions.php (optional)
  • Template overrides
  • Custom code

Benefits of Using Child Themes

🔄
Safe Updates

Update parent theme without losing customizations

🛡️
Fallback Safety

Parent theme acts as fallback if child theme has issues

🧩
Modular Development

Keep customizations separate and organized

⚡
Easy to Maintain

Simpler debugging and maintenance

🔧
Learning Tool

Great way to learn theme development

♻️
Reusability

Port customizations to other sites easily

Creating a Child Theme

1
Create folder
2
Add style.css
3
Add functions.php
4
Activate theme

Step 1: Create the Child Theme Directory

📁 wp-content/themes/
├── 📁 twentytwentyfour/ (parent theme)
└── 📁 twentytwentyfour-child/ (your child theme)
├── style.css (required)
├── functions.php (recommended)
└── screenshot.png (optional)

Step 2: Create style.css with Required Header

/*
Theme Name:   Twenty Twenty-Four Child
Theme URI:    http://example.com/twenty-twenty-four-child/
Description:  Twenty Twenty-Four Child Theme
Author:       Your Name
Author URI:   http://example.com
Template:     twentytwentyfour
Version:      1.0.0
License:      GPL v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, responsive-layout
Text Domain:  twentytwentyfour-child
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

/* Your custom CSS goes below this line */

body {
    font-family: 'Georgia', serif;
}

.site-header {
    background-color: #f0f0f0;
}

/* Override parent theme styles */
.entry-title {
    color: #0073aa;
    font-size: 2.5em;
}

⚠️ Important: Template Line

TheTemplate:line in style.css must exactly match the directory name of the parent theme (case-sensitive). This tells WordPress which theme is the parent.

Child Theme functions.php

Proper Way to Enqueue Parent Styles

<?php
/**
 * Child Theme Functions
 */

// Enqueue parent and child theme styles
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

function child_theme_enqueue_styles() {
    // Get parent theme version for cache busting
    $parent_style = 'twentytwentyfour-style'; // Parent theme handle
    $parent_theme = wp_get_theme( 'twentytwentyfour' );
    $parent_version = $parent_theme->get( 'Version' );
    
    // Enqueue parent theme stylesheet
    wp_enqueue_style( 
        $parent_style, 
        get_template_directory_uri() . '/style.css',
        array(), // Dependencies
        $parent_version
    );
    
    // Enqueue child theme stylesheet
    wp_enqueue_style( 
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ), // Make parent style a dependency
        wp_get_theme()->get( 'Version' )
    );
}

// Add custom functionality below

Adding Custom Functions

<?php
// Custom functions for child theme

// Add theme support
add_action( 'after_setup_theme', 'child_theme_setup' );
function child_theme_setup() {
    // Add custom image size
    add_image_size( 'child-featured', 800, 400, true );
    
    // Add theme support for post formats
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'video' ) );
}

// Modify excerpt length
add_filter( 'excerpt_length', 'child_theme_excerpt_length' );
function child_theme_excerpt_length( $length ) {
    return 30; // 30 words
}

// Add custom widget area
add_action( 'widgets_init', 'child_theme_widgets_init' );
function child_theme_widgets_init() {
    register_sidebar( array(
        'name'          => 'Child Theme Sidebar',
        'id'            => 'child-sidebar',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}

// Override parent theme function
// Parent function must be wrapped in function_exists() check
if ( ! function_exists( 'parent_theme_function' ) ) {
    function parent_theme_function() {
        // Your override code here
    }
}

Overriding Parent Theme Templates

Template File Override Process

To override a parent theme template, simply create a file with the same name in your child theme:

📁 Parent Theme (twentytwentyfour/)
├── header.php
├── footer.php
├── single.php
└── page.php

📁 Child Theme (twentytwentyfour-child/)
├── style.css
├── functions.php
├── single.php← This overrides parent's single.php
└── page-custom.php← New template

Example: Overriding header.php

<?php
/**
 * Child Theme Header Template
 * This file overrides the parent theme's header.php
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header custom-header">
    <!-- Your custom header content -->
    <div class="container">
        <h1 class="site-title">
            <a href="<?php echo home_url(); ?>">
                <?php bloginfo( 'name' ); ?>
            </a>
        </h1>
        <!-- Custom navigation or additional elements -->
    </div>
</header>

Including Parent Theme Files

<?php
// CORRECT: Use get_template_part() for template parts
get_template_part( 'template-parts/content', 'single' );

// CORRECT: Get parent theme directory
$parent_dir = get_template_directory();
$parent_uri = get_template_directory_uri();

// CORRECT: Get child theme directory
$child_dir = get_stylesheet_directory();
$child_uri = get_stylesheet_directory_uri();

// Include parent theme file
include( get_template_directory() . '/inc/custom-functions.php' );

// Load parent theme template
include( get_template_directory() . '/templates/custom-template.php' );

// Get parent theme mod
$parent_option = get_theme_mod( 'header_style' );

// Check if function exists in parent
if ( function_exists( 'parent_theme_function' ) ) {
    parent_theme_function();
}

Common Use Cases for Child Themes

🎨
Style Customization

Modify colors, fonts, layouts without touching parent theme CSS

📄
Template Modifications

Change page layouts, add custom templates, modify loops

🔌
Functionality Extensions

Add custom functions, hooks, filters without plugin overhead

🌐
Translation

Override parent theme translations with custom language files

🏢
Client Projects

Customize premium themes for specific client needs

🧪
Testing

Experiment with modifications without breaking the original

Advanced Child Theme Techniques

Removing Parent Theme Actions/Filters

<?php
// Remove parent theme action
add_action( 'init', 'child_remove_parent_actions', 15 );
function child_remove_parent_actions() {
    // Remove parent theme's custom header
    remove_action( 'wp_head', 'parent_custom_header', 10 );
    
    // Remove parent theme filter
    remove_filter( 'the_content', 'parent_content_filter', 20 );
}

// Replace with child theme version
add_action( 'wp_head', 'child_custom_header', 10 );
function child_custom_header() {
    // Your custom header code
}

// Modify parent theme's add_theme_support
add_action( 'after_setup_theme', 'child_theme_setup', 11 );
function child_theme_setup() {
    // Remove parent theme support
    remove_theme_support( 'custom-background' );
    
    // Add with different args
    add_theme_support( 'custom-background', array(
        'default-color' => 'ffffff',
        'default-image' => get_stylesheet_directory_uri() . '/images/background.jpg',
    ) );
}

Creating Child Theme for Block Themes

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#0073aa",
                    "name": "Primary"
                }
            ]
        }
    },
    "styles": {
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

Common Issues and Solutions

🔴 Child theme not recognized

Solution:Check that Template: line in style.css exactly matches parent theme folder name

🔴 Styles not loading

Solution:Ensure proper enqueueing in functions.php with correct dependencies

🔴 Template overrides not working

Solution:File names must match exactly, check template hierarchy

🔴 Functions conflict

Solution:Use unique function names or check if function exists

✅ Child Theme Best Practices

  • Always use child themesfor modifying third-party themes
  • Keep it minimal:Only override what you need to change
  • Use proper enqueueing:Don't use @import for parent styles
  • Namespace functions:Prefix all functions to avoid conflicts
  • Document changes:Comment your modifications clearly
  • Test updates:Test parent theme updates on staging first
  • Version control:Use Git to track child theme changes
  • Organize files:Mirror parent theme structure when possible
  • Use hooks:Prefer actions/filters over template overrides
  • Keep parent updated:Regularly update the parent theme

Practice Exercise

💻
Hands-On Practice
  1. Create a child theme for Twenty Twenty-Four
  2. Set up proper style.css with theme header
  3. Create functions.php with proper enqueueing
  4. Override the site header color with CSS
  5. Add a custom widget area
  6. Override the single.php template
  7. Add a custom page template
  8. Remove a parent theme action
  9. Add custom functionality via hooks
  10. Test your child theme thoroughly

Additional Resources