How to Create a WordPress Child Theme: Step by Step

A WordPress child theme is a safe way to modify your website without altering the original (parent) theme’s files. It keeps your customizations intact even after updates and allows for easy maintenance. Here’s how to do it in 4 simple steps:

1. Create a Folder: Name it your-theme-child and place it in wp-content/themes/.
2. Add style.css: Include essential theme info and link it to the parent theme.
3. Set Up functions.php: Use wp_enqueue_style() to load styles properly.
4. Modify Templates: Copy and edit only the files you need from the parent theme.

Why Use a Child Theme?

• Keeps changes safe during updates.
• Organizes custom code separately.
• Allows easy testing and troubleshooting.

Quick Tip: Always test your child theme in a staging environment before going live. Ready to start? Scroll down for detailed steps and troubleshooting tips.

Before You Start: Required Setup

Tools You Need

To create a WordPress child theme, you’ll need a few tools and some basic knowledge of HTML, CSS, and PHP. Here’s a quick rundown of what to have on hand:

Tool Category	Required Items	Purpose
Development Tools	Code Editor (e.g., VS Code, Sublime Text)	Editing and writing theme files
Server Access	FTP Client or cPanel File Manager	Uploading and managing theme files
Local Environment	Local by Flywheel or DevKinsta	Safely testing changes
Technical Knowledge	Basics of HTML, CSS, and PHP	Making necessary modifications

Working in a local development environment is highly recommended. It lets you experiment and test changes without affecting your live site. Once your tools are ready, take a moment to review the details of your parent theme before diving into customization.

Parent Theme Basics

Understanding your parent theme is crucial. Here’s what you need to know:

Theme Structure Overview
Your parent theme’s directory is located in the wp-content/themes/ folder. Key files to focus on include:

• style.css: Contains theme details and primary styles.
• functions.php: Manages theme functionality.
• header.php and footer.php: Define the global layout.
• Template files: Control how content is displayed.

Configuration Checklist
Before moving forward, ensure everything is set up properly:

Requirement	Action
WordPress Version	Confirm you’re using the latest version.
Parent Theme Version	Verify compatibility with WordPress.
Active Plugins	Identify plugins tied to the theme.
Current Settings	Back up theme customizer configurations.

With these steps completed, you’ll be ready to start building your child theme.

Ultimate Guide: Creating a WordPress Child Theme in Minutes

4 Steps to Create a WordPress Child Theme

Want to build on your parent theme’s setup? Follow these steps to create a child theme and ensure everything runs smoothly.

1. Create the Child Theme Folder

First, create a new folder in wp-content/themes/. Make sure the folder name follows WordPress naming rules. Here’s how it should look:

Parent Theme	Child Theme Folder Name
Twenty Twenty-Three	twentytwentythree-child
Astra	astra-child
GeneratePress	generatepress-child

This naming format helps WordPress link your child theme to its parent. You can create the folder using FTP or a file manager.

2. Set Up style.css

Inside your new folder, create a style.css file and include the following code:

/* 
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
Description: A child theme of Twenty Twenty-Three
Author: Your Name
Version: 1.0
Text Domain: twentytwentythree-child 
*/

Important: The Template value must exactly match the parent theme’s directory name, including capitalization.

3. Configure functions.php

Next, create a functions.php file in your child theme folder and add this code:

<?php
function my_child_theme_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
?>

"In January 2016, WordPress developer Jeff Starr demonstrated a 12% improvement in page load time by switching from @import to wp_enqueue_style() for loading parent theme styles. This change reduced HTTP requests from 24 to 21 on his test site running the Twenty Sixteen theme." ^[5]

This method is more efficient and avoids performance issues.

4. Copy and Edit Template Files

When it comes to editing templates, follow these guidelines:

Action	How to Do It
File Selection	Copy only the templates you need to customize
Directory Structure	Match the parent theme’s structure exactly
File Location	Place files in the same subdirectories
Testing	Test changes in a development environment

Before making changes, document which files you’re editing and why. This will save you time when updating the parent theme or troubleshooting. Use the WordPress template hierarchy to identify the files you need, and only modify what’s necessary to avoid extra maintenance work. Always test your changes in a development setup before deploying them live.

sbb-itb-a010687

Fix Common Child Theme Problems

When working with WordPress child themes, you might run into a few recurring issues. Here’s how to address them effectively and keep your child theme running smoothly.

Fix Style and Feature Issues

Setting up a child theme often leads to challenges with styling or missing features. Use this table to identify and solve common problems:

Problem	Solution	Implementation
Missing Styles	Check style.css enqueuing	Ensure the Template line matches the parent theme folder name
Broken Responsiveness	Review media queries	Use browser developer tools to locate and fix breakpoint conflicts
JavaScript Conflicts	Proper script loading	Use wp_enqueue_script with the correct dependencies
Feature Loss	Check template overrides	Ensure copied templates retain parent theme hooks

For more intricate style issues, inspect selectors using developer tools and adjust specificity rather than relying on !important. For example:

.parent-class .child-class .element {
    property: value;
}

If functionality problems arise, enable WordPress debug mode in your wp-config.php file to identify errors:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

Prevent Update Conflicts

It’s essential to protect your customizations from being disrupted by parent theme updates. For instance, WPBeginner shared an example in June 2022 where a Twenty Twenty-Two child theme lost all styling after a WordPress update. The issue was resolved by correctly enqueueing the parent theme’s stylesheet, ensuring proper style inheritance ^[2].

To avoid similar problems, follow these steps:

• Track Template Changes: Keep a record of parent theme files you’ve copied and modified.
• Use Hooks: Rely on WordPress hooks instead of overwriting entire functions.
• Test Updates: Always test parent theme updates in a staging environment before applying them to your live site.

For JavaScript, ensure scripts are loaded in the correct order. Here’s an example:

function child_theme_scripts() {
    wp_enqueue_script(
        'child-script', 
        get_stylesheet_directory_uri() . '/js/child-script.js', 
        array('jquery', 'parent-script'), 
        '1.0', 
        true
    );
}
add_action('wp_enqueue_scripts', 'child_theme_scripts');

For more advanced customizations, add version checks in your child theme’s functions.php file to handle updates effectively:

function check_parent_theme_version() {
    $parent_theme = wp_get_theme(get_template());
    $parent_version = $parent_theme->get('Version');

    if (version_compare($parent_version, '2.0', '>=')) {
        // Adjust functionality for version 2.0 and above
    }
}
add_action('after_setup_theme', 'check_parent_theme_version');

Maintain Your Child Theme

Keeping your WordPress child theme up-to-date is key to ensuring it works smoothly with your site and stays compatible with updates. A 2022 WPBeginner case study found that having a structured maintenance routine can cut post-update issues by 40% and reduce theme-related downtime by 25% ^[3].

Test After Updates

Follow a clear testing process to ensure your child theme functions correctly after updates. Here’s a handy workflow:

Testing Phase	Tasks	Tools to Use
Pre-Update Check	Note current functionality, take screenshots	Browser dev tools, Theme Check plugin
Staging Testing	Update the parent theme, confirm child theme features	LocalWP, WP Engine staging
Performance Review	Measure load times, debug errors	Query Monitor, Browser dev tools
Responsive Testing	Check layouts on different devices	Browser responsive mode
Final Verification	Compare updates with pre-update documentation	What The File plugin

To make testing easier, enable WordPress debug mode in your staging environment using the following code:

// Add to wp-config.php in staging
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Once testing is complete, document all changes to simplify future updates.

Track Your Changes

Using Git to track changes can help manage your child theme over time. As you make updates, keep detailed notes about the changes. For example:

/*
 * Twenty Twenty-Four Child - functions.php
 * Last Modified: 2025-02-18 - Added custom portfolio post type for mobile menu optimization.
 * Parent Version Tested: 1.2.3
 */

Maintain a changelog to log all modifications:

# changelog.txt
2025-02-18 - v1.1.0
- Added custom portfolio post type
- Updated header.php for improved mobile menu
- Fixed style inheritance from parent theme

2025-01-15 - v1.0.9
- Optimized image loading for better performance
- Updated typography settings

For more advanced customizations, document any dependencies on the parent theme:

// template-tracking.php
$tracked_templates = array(
    'header.php' => array(
        'parent_version' => '1.2.3',
        'last_checked' => '2025-02-18',
        'modifications' => 'Custom mobile menu implementation'
    )
);

Use tools like the Query Monitor plugin to identify performance bottlenecks. It can help you track database queries, hooks, and scripts that might need fine-tuning ^[4].

Wrap-Up and Checklist

Main Points Review

When creating a WordPress child theme, paying close attention to detail is crucial. Here are the key areas to focus on:

Component	Purpose	Potential Issues
Directory Structure	Organizes theme files	Errors in folder location or naming
Style Inheritance	Keeps design consistent	Forgetting to enqueue parent theme styles
Template Hierarchy	Manages layout customization	Overriding templates unnecessarily
Update Compatibility	Maintains long-term stability	Conflicts with updated parent theme versions

Double-check these components before activating your child theme to ensure everything works as intended.

Setup Verification Steps

Before rolling out your child theme on a live site, follow these verification steps to ensure it’s ready:

Verification Area	Check Points and Testing Method
Style Loading	Use browser developer tools to confirm parent and child styles are properly loaded.
Template Files	Test overridden templates and compare with parent files for compatibility.
Performance	Use the Query Monitor plugin to check load times and resource usage.
Cross-browser	Test the theme’s layout and functionality in different browsers.

Enable debugging in your staging environment to catch any issues:

// Add to wp-config.php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

Document your findings in a clear and structured format for future reference:

Theme Name: Twenty Twenty-Four Child
Version Tested: 1.0.0
Parent Version: 2.0.1
Test Date: 2025-02-18
Status: ✓ Passed
Notes: All template overrides functioning correctly

FAQs

How to create a child theme in WordPress step by step?

Here’s a simple guide to creating a WordPress child theme. This method builds on the parent theme structure already outlined.

1. Create the Directory
   • Go to wp-content/themes and create a new folder. Name it something like parent-theme-child.
2. Add a style.css File
   • Inside your child theme folder, create a style.css file.
   • Add the following header information to the file:

/*  
  Theme Name: Twenty Twenty-Two Child  
  Theme URI: https://example.com/twenty-twenty-two-child/  
  Description: A child theme of Twenty Twenty-Two  
  Author: Your Name  
  Author URI: https://example.com  
  Template: twentytwentytwo  
  Version: 1.0.0  
  License: GNU General Public License v2 or later  
  License URI: http://www.gnu.org/licenses/gpl-2.0.html  
*/

3. Set Up functions.php
   • Create a functions.php file in the child theme folder.
   • Add this code to include the parent theme’s stylesheet:

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

4. Optional: Copy Template Files
   • If you need to modify specific templates, copy them from the parent theme into the child theme folder, keeping the same structure.
   • WordPress will prioritize the child theme’s version of these files.
5. Activate the Child Theme
   • Go to the WordPress admin area, navigate to Appearance > Themes, and activate your child theme.

These steps cover the basics. For more details on the Template line in the style.css file, refer to earlier sections ^[1][2].

Related Blog Posts

• Common WordPress Errors: Solutions and Quick Fixes
• How to Manually Backup WordPress Files and Database