If you manage WordPress sites, you'll eventually want to customize your theme's appearance or functionality. Editing the active theme directly works temporarily, but every theme update will overwrite your changes. Child themes solve this problem by letting you modify a theme safely without touching the original files.
This guide walks you through creating your first WordPress child theme from zero prior knowledge. We'll define every term, explain the folder structure, and build a working child theme step by step.
What Is a WordPress Child Theme?
A child theme is a separate theme that inherits all the functionality, features, and styling of another theme, called the parent theme. Think of it as an extension or overlay that sits on top of the parent.
When WordPress loads your site, it checks the child theme first for template files, styles, and functions. If it doesn't find what it needs, it falls back to the parent theme. This inheritance system means you only need to include the files you want to change in your child theme.
Why You Need a Child Theme
Without a child theme, customizing your active theme creates three problems:
- Updates erase your work – When you update a theme through the WordPress dashboard, the update replaces all theme files, deleting your custom CSS, template edits, and code additions.
- Hard to troubleshoot – If something breaks, it's difficult to separate your changes from the original theme code.
- No clean rollback – You can't easily undo your modifications without restoring from backup or reinstalling the theme.
Child themes keep your customizations separate from the parent theme. Update the parent theme as often as needed and your child theme changes remain intact.
What You'll Need Before Starting
Before creating a child theme, make sure you have:
- FTP or file manager access to your WordPress installation, either through your hosting control panel (cPanel File Manager, Plesk File Manager) or an FTP client like FileZilla
- A text editor for writing code – Notepad++ (Windows), TextEdit (Mac), or VS Code work well
- A parent theme installed – This guide uses Twenty Twenty-Three as the example, but the process works for any theme
- Basic WordPress knowledge – You should know how to access your WordPress admin dashboard and activate themes
You do not need coding experience. We'll explain every line of code you write.
Understanding the WordPress Theme Directory Structure
WordPress stores all themes in a specific location on your server. The path is:
/public_html/wp-content/themes/
(On some hosts, public_html might be named www, httpdocs, or html. Check your hosting documentation if you're unsure.)
Inside the themes folder, you'll see a directory for each installed theme. For example:
themes/
├── twentytwentythree/
├── twentytwentyfour/
└── astra/
Each theme folder contains template files, style sheets, images, and other assets that define how your site looks and behaves.
Step 1: Create the Child Theme Folder
Navigate to /wp-content/themes/ using your FTP client or file manager.
Create a new folder for your child theme. The folder name should:
- Be lowercase
- Contain no spaces (use hyphens instead)
- Reference the parent theme name for clarity
For a child theme of Twenty Twenty-Three, a good folder name is:
twentytwentythree-child
For Astra, use:
astra-child
The folder name doesn't affect functionality, but a clear naming convention helps you identify child themes at a glance.
Step 2: Create the style.css File
Every WordPress theme requires a style.css file in its root directory. This file serves two purposes:
- It provides the theme metadata that WordPress reads to identify and display the theme
- It contains your custom CSS rules
Inside your new child theme folder, create a file named style.css (all lowercase, no spaces).
Open style.css in your text editor and add this code:
/*
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
Description: A child theme of Twenty Twenty-Three
Author: Your Name
Version: 1.0.0
*/
Let's break down each line:
- Theme Name – The display name that appears in your WordPress admin under Appearance → Themes. Make it descriptive.
- Template – The folder name of the parent theme (must match exactly). This tells WordPress which theme to inherit from.
- Description – A brief explanation of what this theme does (optional but helpful).
- Author – Your name or company name (optional).
- Version – Your theme's version number for tracking changes (optional).
The Template line is critical. If the folder name doesn't match the parent theme's folder exactly, WordPress won't recognize the relationship and the child theme won't work.
Save the file.
Step 3: Create the functions.php File
The functions.php file is where you add PHP code to customize your theme's behavior. In a child theme, its primary job is to load the parent theme's stylesheet correctly.
Create a new file named functions.php in your child theme folder.
Add this code:
<?php
// Enqueue parent and child theme styles
function childtheme_enqueue_styles() {
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') );
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );
What This Code Does
Let's break down the code line by line:
<?php– Opens the PHP tag (required at the start of any PHP file)function childtheme_enqueue_styles()– Defines a new function namedchildtheme_enqueue_styleswp_enqueue_style()– A WordPress function that properly loads CSS files'parent-style'– A unique handle (name) for the parent stylesheetget_template_directory_uri()– Returns the URL to the parent theme folder'child-style'– A unique handle for the child stylesheetget_stylesheet_directory_uri()– Returns the URL to the child theme folderarray('parent-style')– Tells WordPress to load the parent stylesheet before the child stylesheet (important for inheritance)add_action()– Hooks your function into WordPress so it runs at the right time
This approach ensures the parent theme's styles load first, then your child theme styles load and override them where needed.
Save the file.
Step 4: Activate Your Child Theme
Your child theme is now complete and ready to activate. The minimum working child theme contains just two files:
twentytwentythree-child/
├── style.css
└── functions.php
Log in to your WordPress admin dashboard and navigate to Appearance → Themes.
You should see your child theme listed alongside other installed themes, showing the theme name from your style.css file.
Click Activate.
Visit your site's front end. It should look identical to the parent theme because you haven't added any customizations yet. That's exactly what you want at this stage.
Step 5: Add Your First Customization
Now that your child theme is active, let's add a simple customization to verify everything works.
Open your child theme's style.css file and add this CSS rule below the header comment:
/*
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
Description: A child theme of Twenty Twenty-Three
Author: Your Name
Version: 1.0.0
*/
/* Custom styles start here */
body {
background-color: #f5f5f5;
}
Save the file and upload it to your server (if you're editing locally).
Refresh your website. The background color should now be a light gray instead of white.
If you see the color change, your child theme is working correctly. You can now add any CSS customizations to style.css and they'll override the parent theme's styles.
Adding Custom Template Files
Beyond CSS changes, you can override any template file from the parent theme by copying it into your child theme folder.
WordPress uses template files to control how different parts of your site display. Common templates include:
header.php– Site headerfooter.php– Site footersingle.php– Single post displaypage.php– Page displayfunctions.php– Theme functions
To customize a template:
- Locate the template file in your parent theme folder
- Copy it to your child theme folder (maintain the same filename)
- Edit the copy in your child theme
For example, to customize the footer:
- Find
/themes/twentytwentythree/footer.php - Copy it to
/themes/twentytwentythree-child/footer.php - Edit
/themes/twentytwentythree-child/footer.php
WordPress will now use your child theme's footer.php instead of the parent's version.
Important: Only copy template files you plan to modify. Don't copy the entire parent theme. This keeps your child theme lean and makes updates easier to manage.
Adding Custom Functions
You can add custom PHP functions to your child theme's functions.php file. These functions extend your theme's capabilities without modifying the parent.
For example, to change the excerpt length:
<?php
// Enqueue parent and child theme styles
function childtheme_enqueue_styles() {
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') );
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );
// Custom excerpt length
function custom_excerpt_length( $length ) {
return 30;
}
add_filter( 'excerpt_length', 'custom_excerpt_length' );
Add new functions below your enqueue function. Each function should have a unique name to avoid conflicts with the parent theme or plugins.
Child Theme Best Practices
As you work with child themes, follow these guidelines:
Keep modifications minimal
Only include files and code you're actually customizing. A bloated child theme is harder to maintain and troubleshoot.
Document your changes
Add comments explaining what each customization does and why you made it. You'll thank yourself six months later.
/* Make site title larger for better mobile visibility */
.site-title {
font-size: 2rem;
}
Test after parent theme updates
When you update the parent theme, check your site thoroughly. Parent theme updates can change template structure, function names, or CSS classes that your child theme depends on.
Use version control
If you're comfortable with Git, track your child theme in a repository. This gives you a complete history of changes and makes it easy to roll back mistakes.
Never edit the parent theme
Once you create a child theme, resist the temptation to edit parent theme files directly. If you need functionality the child theme can't provide, use a custom plugin instead.
Troubleshooting Common Issues
Child theme doesn't appear in WordPress
Check that:
- The Template line in style.css exactly matches your parent theme's folder name
- Both style.css and functions.php are in the child theme root directory
- File permissions allow WordPress to read the files (644 for files, 755 for folders)
Site looks broken after activation
The most common cause is the parent stylesheet not loading. Verify:
- Your functions.php uses the correct enqueue code
- The parent theme folder name in get_template_directory_uri() is correct
- You've cleared your browser cache and any site caching plugins
Custom CSS isn't applying
If your CSS rules aren't taking effect:
- Check CSS specificity – the parent theme's rules might be more specific than yours
- Clear all caches (browser, hosting, WordPress plugins)
- Use browser developer tools to inspect elements and see which styles are applied
- Verify your style.css file is being loaded by viewing your page source
Conclusion
Creating a child theme is one of the most important skills for anyone managing WordPress sites long-term. With just two files and a dozen lines of code, you protect your customizations from updates while maintaining a clean, maintainable codebase.
Start with the minimal setup we've covered: create the child theme folder, add style.css with proper headers, include functions.php to load stylesheets, and activate. From there, customize gradually, adding only the CSS rules and template files you need.
Child themes give you the confidence to experiment. If a customization doesn't work, delete it from your child theme and the parent theme's original behavior returns immediately. This safety net makes WordPress development more approachable for beginners and more efficient for experienced developers alike.