WordPress Child Themes: Creation, Enqueueing & Safe Customization

When building commercial websites or customizing an existing WordPress theme, the most dangerous mistake a developer can make is directly modifying the parent theme's style.css or functions.php. When the theme creator releases a security or feature update, WordPress overwrites all parent files — instantly deleting every custom edit and line of code you wrote. The industry-standard solution is creating a Child Theme.

What is a Child Theme?

A Child Theme inherits all the functionality, styling, and templates of its Parent Theme. When a visitor requests a page, WordPress loads the child theme's styles and functions first. If a specific template file (like header.php or single.php) exists in the child theme, WordPress executes the child version; otherwise, it falls back to the parent version.

Step-by-Step: How to Create a Child Theme Manually

Let us create a production-ready child theme for the popular Astra parent theme. Follow these three steps:

Step 1: Create the Child Theme Directory

Inside your WordPress directory, navigate to /wp-content/themes/ and create a new directory named after your parent theme with -child appended:

/wp-content/themes/astra-child/

Step 2: Create the Child style.css File

Create a file named style.css inside /wp-content/themes/astra-child/ and insert the required header comment. The Template: declaration is case-sensitive and MUST match the parent theme's directory name exactly:

/*
 Theme Name:   Astra Child (Veewom)
 Theme URI:    https://veewom.com/wordpress/
 Description:  Custom High-Performance Child Theme for Astra
 Author:       Veewom Web Development Team
 Author URI:   https://veewom.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* Custom CSS Enhancements Below */
:root {
  --vee-brand-orange: #ff6600;
}

.site-title a {
  color: var(--vee-brand-orange) !important;
  font-weight: 800;
}

Step 3: Enqueue Parent & Child Stylesheets in functions.php

Create a file named functions.php inside /wp-content/themes/astra-child/. Never use @import inside CSS, as it blocks parallel browser downloads. Instead, use the official WordPress wp_enqueue_scripts action hook:

<?php
/**
 * Astra Child Theme functions and definitions
 */

add_action('wp_enqueue_scripts', 'veewom_enqueue_child_styles');

function veewom_enqueue_child_styles() {
    // 1. Enqueue Parent Theme Stylesheet
    wp_enqueue_style(
        'parent-style', 
        get_template_directory_uri() . '/style.css'
    );

    // 2. Enqueue Child Theme Stylesheet with dependency on parent
    wp_enqueue_style(
        'child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'),
        wp_get_theme()->get('Version')
    );
}
?>

Crucial Difference: get_template_directory_uri() vs. get_stylesheet_directory_uri()

This distinction is one of the most frequently failed questions on developer job interviews:

How Template Overriding Works

To modify a template file like footer.php: copy footer.php from the parent theme directory and paste it directly into your /astra-child/ folder. Edit the child copy to add your custom copyright links or analytics scripts. WordPress will now automatically serve your modified child template while leaving the parent file pristine!