As a WordPress developer at Jackober, I’ve created countless child themes for clients across various industries. Child themes are an essential tool in WordPress development, allowing you to customize a theme while maintaining the ability to update the parent theme without losing your modifications.
In this experts guide, I’ll walk you through everything you need to know about WordPress child themes—from understanding their importance to creating and customizing them with practical code examples. Whether you’re a beginner looking to make simple customizations or a developer seeking advanced techniques, you’ll find actionable information to help you create effective child themes for your WordPress sites.
Before diving into the technical aspects, let’s establish a clear understanding of what child themes are and why they’re crucial for WordPress development.
A child theme in WordPress is a theme that inherits the functionality and styling of another theme, called the parent theme. The child theme can override specific files and functions of the parent theme, allowing you to make customizations without modifying the parent theme’s files directly.
The WordPress Codex defines a child theme as “a theme that inherits the functionality and styling of another theme, called the parent theme.”
Using child themes offers several significant advantages:
You should create a child theme when:
If you’re only making minimal changes that can be handled through WordPress customizer or a custom CSS plugin, a child theme might not be necessary. However, for any substantial customization, child themes are the recommended approach.

Before creating your child theme, ensure you have the following in place:
To follow this guide effectively, you’ll need:
Selecting the right parent theme is crucial:
For blog sites, you might consider options from our Free WordPress Themes collection. For specialized needs, industry-specific themes like Best Magazine WordPress Theme or Best Architecture WordPress Themes can provide solid foundations.
Before making any changes, always back up your site:
For detailed backup instructions, refer to our guide on How to Backup WordPress Site.
Let’s start with creating a simple child theme structure:
First, you need to create a directory for your child theme:
/wp-content/themes/ in your WordPress installationtwentytwentythree-child)Best Practice: Use a descriptive name that clearly identifies both the parent theme and the purpose of the child theme.
The style.css file is essential for any WordPress theme. For a child theme, it serves two crucial purposes:
Create a file named style.css in your child theme directory with the following content:
/*
Theme Name: Twenty Twenty-Three Child
Theme URI: https://jackober.com/
Description: A child theme for the Twenty Twenty-Three WordPress theme
Author: Your Name
Author URI: https://jackober.com/
Template: twentytwentythree
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentythree-child
*/
/* Add your custom styles after this line */
Important: The Template parameter must exactly match the directory name of the parent theme. This is case-sensitive.
The functions.php file is where you’ll enqueue styles and add custom functionality:
<?php
/**
* Twenty Twenty-Three Child Theme functions and definitions
*/
// Enqueue parent and child theme stylesheets
function twentytwentythree_child_enqueue_styles() {
$parent_style = 'twentytwentythree-style'; // This should match the parent theme's handle
// Enqueue parent theme's style
wp_enqueue_style( $parent_style,
get_template_directory_uri() . '/style.css' );
// Enqueue child theme's style, with parent theme's style as a dependency
wp_enqueue_style( 'twentytwentythree-child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'twentytwentythree_child_enqueue_styles' );
// Add custom functions below this line
This code ensures that the parent theme’s stylesheet loads first, followed by your child theme’s stylesheet.
A screenshot helps identify your theme in the WordPress admin:
screenshot.pngNow that you’ve created the basic files:
Congratulations! You now have a functioning child theme. While it doesn’t have any customizations yet, the structure is in place for you to start making changes.

With the basic structure in place, let’s explore different ways to customize your child theme:
The simplest way to customize your child theme is through CSS:
Add your custom CSS directly to the style.css file after the theme information:
/* Custom CSS */
.site-header {
background-color: #f5f5f5;
padding: 20px;
}
.entry-title {
color: #0066cc;
font-size: 28px;
}
For better organization, especially for extensive customizations:
custom-styles.css in your child theme directoryfunctions.php:function twentytwentythree_child_enqueue_custom_styles() {
wp_enqueue_style( 'twentytwentythree-custom-styles',
get_stylesheet_directory_uri() . '/custom-styles.css',
array( 'twentytwentythree-child-style' ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'twentytwentythree_child_enqueue_custom_styles', 20 );
This approach helps maintain cleaner files, especially as your customizations grow.
To modify the HTML structure of specific pages or components:
For example, to customize the single post template:
single.php from the parent theme to your child themeWordPress will automatically use your child theme’s template file instead of the parent’s.
Important: Only copy the specific files you need to modify. Your child theme will inherit all other templates from the parent theme.
Enhance your theme’s functionality through the functions.php file:
function twentytwentythree_child_widgets_init() {
register_sidebar( array(
'name' => __( 'Custom Sidebar', 'twentytwentythree-child' ),
'id' => 'custom-sidebar',
'description' => __( 'Add widgets here to appear in your custom sidebar.', 'twentytwentythree-child' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'twentytwentythree_child_widgets_init' );
function twentytwentythree_child_register_post_types() {
register_post_type( 'portfolio',
array(
'labels' => array(
'name' => __( 'Portfolio', 'twentytwentythree-child' ),
'singular_name' => __( 'Portfolio Item', 'twentytwentythree-child' )
),
'public' => true,
'has_archive' => true,
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
'menu_icon' => 'dashicons-format-gallery',
'rewrite' => array( 'slug' => 'portfolio' ),
)
);
}
add_action( 'init', 'twentytwentythree_child_register_post_types' );
You can create entirely new template files for your child theme:
Create a file named template-full-width-no-sidebar.php in your child theme directory:
<?php
/**
* Template Name: Full Width No Sidebar
* Description: A full-width page template with no sidebar
*/
get_header();
?>
<div id="primary" class="content-area full-width">
<main id="main" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();
This creates a new page template that users can select when creating or editing pages.
For developers looking to take their child themes to the next level:
To modify specific functions from the parent theme:
if ( !function_exists() ))functions.php// Override parent theme's custom_excerpt_length function
if ( ! function_exists( 'custom_excerpt_length' ) ) {
function custom_excerpt_length( $length ) {
return 30; // Change excerpt length to 30 words
}
}
// Remove parent theme function
remove_action( 'wp_head', 'parent_theme_custom_header', 10 );
// Add our modified version
function child_theme_custom_header() {
// Modified code here
}
add_action( 'wp_head', 'child_theme_custom_header', 10 );
Many modern themes provide hooks for easier customization:
// Add content before the footer
function child_theme_before_footer() {
echo '<div class="pre-footer-message">Thank you for visiting our site!</div>';
}
add_action( 'parent_theme_before_footer', 'child_theme_before_footer' );
To add custom JavaScript:
function twentytwentythree_child_enqueue_scripts() {
wp_enqueue_script(
'twentytwentythree-child-scripts',
get_stylesheet_directory_uri() . '/js/custom-scripts.js',
array( 'jquery' ),
wp_get_theme()->get('Version'),
true // Load in footer
);
}
add_action( 'wp_enqueue_scripts', 'twentytwentythree_child_enqueue_scripts' );
Create a /js/ directory in your child theme and add your custom-scripts.js file there.
Make your child theme translation-ready:
function twentytwentythree_child_load_textdomain() {
load_child_theme_textdomain( 'twentytwentythree-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'twentytwentythree_child_load_textdomain' );
Create a /languages/ directory in your child theme for translation files.
Different parent themes may require specific approaches for child theme creation:
Theme frameworks like Genesis, Divi, or Astra have specific child theme requirements:
For Genesis, the style.css header needs to include:
/*
Theme Name: Genesis Child
Theme URI: https://jackober.com/
Description: A custom child theme for the Genesis Framework
Author: Your Name
Author URI: https://jackober.com/
Template: genesis
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: genesis-child
*/
And the functions.php typically starts with:
<?php
// Start the engine
include_once( get_template_directory() . '/lib/init.php' );
// Child theme setup
function genesis_child_setup() {
// Add support for custom background
add_theme_support( 'custom-background' );
// Add support for custom header
add_theme_support( 'custom-header' );
// Add support for HTML5
add_theme_support( 'html5' );
}
add_action( 'after_setup_theme', 'genesis_child_setup' );
For themes designed to work with page builders like those covered in our Best WordPress Page Builders guide:
function astra_elementor_child_enqueue_styles() {
wp_enqueue_style( 'astra-theme-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'astra-child-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), wp_get_theme()->get('Version') );
// Optionally enqueue Elementor-specific styles
if ( class_exists( '\Elementor\Plugin' ) ) {
wp_enqueue_style( 'astra-child-elementor', get_stylesheet_directory_uri() . '/elementor-custom.css', array(), wp_get_theme()->get('Version') );
}
}
add_action( 'wp_enqueue_scripts', 'astra_elementor_child_enqueue_styles' );
Let’s look at some practical examples of child theme customizations:
To modify the header layout in your child theme:
header.php from the parent theme to your child themestyle.css:.site-header {
background: linear-gradient(to right, #3494E6, #EC6EAD);
padding: 25px 0;
}
.site-title a {
color: #ffffff;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
.site-description {
color: rgba(255, 255, 255, 0.8);
font-style: italic;
}
To create a unique blog layout:
archive.php and content.php from the parent theme<div class="blog-grid">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('grid-item'); ?>>
<div class="grid-item-inner">
<?php if ( has_post_thumbnail() ) : ?>
<div class="grid-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium_large'); ?>
</a>
</div>
<?php endif; ?>
<div class="grid-content">
<header class="entry-header">
<?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
<div class="entry-meta">
<?php echo get_the_date(); ?> - <?php the_category(', '); ?>
</div>
</header>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
</div>
</div>
</article>
<?php
endwhile;
?>
</div>
style.css:.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
margin: 30px 0;
}
.grid-item {
border: 1px solid #eaeaea;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grid-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.grid-thumbnail img {
width: 100%;
height: 200px;
object-fit: cover;
}
.grid-content {
padding: 20px;
}
.entry-title {
font-size: 20px;
margin-bottom: 10px;
}
.entry-meta {
color: #777;
font-size: 14px;
margin-bottom: 15px;
}
.read-more {
display: inline-block;
margin-top: 15px;
padding: 8px 15px;
background: #0066cc;
color: white;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
Enhance your theme with custom shortcodes:
function child_theme_button_shortcode( $atts, $content = null ) {
// Parse attributes
$atts = shortcode_atts( array(
'url' => '#',
'color' => 'blue',
'size' => 'medium',
'target' => '_self'
), $atts );
// Build the button HTML
$html = '<a href="' . esc_url( $atts['url'] ) . '" class="custom-button custom-button-' . esc_attr( $atts['color'] ) . ' custom-button-' . esc_attr( $atts['size'] ) . '" target="' . esc_attr( $atts['target'] ) . '">';
$html .= do_shortcode( $content );
$html .= '</a>';
return $html;
}
add_shortcode( 'button', 'child_theme_button_shortcode' );
Add supporting CSS:
.custom-button {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
text-align: center;
}
.custom-button-blue {
background-color: #0066cc;
color: white;
}
.custom-button-green {
background-color: #4CAF50;
color: white;
}
.custom-button-small {
padding: 5px 10px;
font-size: 14px;
}
.custom-button-medium {
padding: 10px 20px;
font-size: 16px;
}
.custom-button-large {
padding: 15px 30px;
font-size: 18px;
}
Usage in content: [button url="https://example.com" color="green" size="large"]Click Here[/button]
Even with careful implementation, issues can arise. Here are solutions to common problems:
If the parent theme styles aren’t being applied:
Template value in your style.css header matches the parent theme’s directory name exactly (case-sensitive)functions.php is correctly enqueuing the parent theme’s stylesheetIf your CSS changes aren’t taking effect:
!important for some stubborn stylesIf you’re experiencing function conflicts:
function_exists() checks before defining functionsFor more WordPress troubleshooting help, check our 15 Easy Fixes for Common WordPress Issues guide.

Follow these guidelines for efficient, maintainable child themes:
Keep your child theme files organized:
Ensure your child theme doesn’t slow down the site:
Maintain security in your child theme:
wp_kses, esc_html, etc.)Manage your child theme development efficiently:
Certain WordPress implementations require specialized child theme approaches:
For online stores using How to create an online store with WordPress solutions:
Example WooCommerce template override:
// Copy woocommerce/single-product.php to your child theme's woocommerce directory
// Then make your modifications
For sites using Best WordPress Membership Plugins:
For sites using Best WordPress Translation Plugins:
Creating a child theme is one of the most valuable skills for WordPress customization. It allows you to personalize themes while maintaining the ability to update the parent theme, providing the perfect balance between customization and maintainability.
Whether you’re making simple style adjustments or comprehensive functional changes, the child theme approach ensures your modifications remain intact through parent theme updates. This is especially important as WordPress and themes continue to evolve with new features and security improvements.
By following the steps and best practices outlined in this guide, you can create effective, efficient child themes that perfectly match your design and functionality requirements while maintaining a solid foundation for future updates.
If you need assistance with custom child theme development or have complex customization needs, our team at Jackober specializes in WordPress development. As a WordPress Expert for Hire, I can help you create tailored child themes that meet your specific requirements while following WordPress best practices.
Remember, creating a child theme is not just a technical process—it’s a strategic approach to WordPress customization that balances immediate needs with long-term maintainability.
Q: Will my child theme automatically inherit all parent theme updates?
A: Yes, your child theme will inherit all functional updates, bug fixes, and new features from the parent theme. However, if the parent theme significantly changes its structure or removes functions your child theme relies on, you may need to update your child theme accordingly. This is why it’s important to choose well-maintained parent themes with good documentation and to test after parent theme updates.
Q: Can I create a child theme for any WordPress theme?
A: Technically yes, you can create a child theme for any WordPress theme. However, some themes are better suited as parent themes than others. Look for themes that follow WordPress coding standards, provide hooks for customization, and have good documentation. Themes specifically designed as “parent themes” or “theme frameworks” often provide the best foundation for child themes. If you’re using a highly customized theme from marketplaces like ThemeForest, check their documentation for specific child theme instructions.
Q: How do I update my child theme when the parent theme updates?
A: One of the main benefits of child themes is that you generally don’t need to update your child theme when the parent theme updates. The parent theme updates independently, and your child theme continues to override only the specific files and functions you’ve customized. However, it’s good practice to test your site after parent theme updates to ensure everything still works as expected. If the parent theme has made major structural changes, you might need to adjust your child theme’s overriding files to match the new structure.
Q: Can I use a child theme with page builders like Elementor or Divi?
A: Yes, child themes work well with page builders, and in fact, they’re highly recommended when using page builders. Page builder themes like Divi, Astra, or GeneratePress often receive updates, and a child theme ensures your customizations aren’t lost during these updates. When using page builders, your child theme might focus more on functional customizations through functions.php rather than template overrides, as much of the design is handled through the page builder interface. For more on page builders, see our guide on Best WordPress Page Builders.
Q: Do child themes slow down WordPress?
A: When properly implemented, child themes have a negligible impact on performance. In fact, they can sometimes improve performance by allowing you to streamline code and remove unnecessary features from the parent theme. To ensure optimal performance: 1) Properly enqueue styles and scripts, 2) Minimize the number of template overrides, 3) Keep your CSS and PHP code efficient, and 4) Follow WordPress performance best practices. For more speed optimization tips, refer to our WordPress Page Speed Optimization guide.
Q: How do I move customizer settings from parent to child theme?
A: Customizer settings are typically stored in the database and are not automatically transferred when switching to a child theme. Some themes provide export/import functionality for customizer settings. If not, you can either: 1) Manually recreate your customizer settings in the child theme, or 2) Use a plugin like “Customizer Export/Import” to transfer settings. Note that some theme-specific customizer settings might not be available in the child theme if they’re not properly registered in your child theme’s functions.php.
Q: Can I have multiple child themes for one parent theme?
A: Yes, you can create multiple child themes for the same parent theme, but you can only activate one at a time. This approach is useful for developing different versions of a site or for testing major changes before implementing them. Some developers create different child themes for different purposes (e.g., a “development” child theme and a “production” child theme) or for different clients who use the same parent theme with different customizations.
Q: What’s the difference between using a child theme and a custom CSS plugin?
A: While both approaches allow you to add custom CSS, they serve different purposes. Custom CSS plugins are suitable for minor style adjustments without modifying theme files. Child themes offer more comprehensive customization capabilities, including template modifications, functional changes through functions.php, and more extensive styling. Child themes also provide better organization and maintainability for significant customizations. For small style tweaks, a CSS plugin might be sufficient, but for any substantial customization, a child theme is the recommended approach.
Jackober is a seasoned WordPress expert and digital strategist with a passion for empowering website owners. With years of hands-on experience in web development, SEO, and online security, Jackober delivers reliable, practical insights to help you build, secure, and optimize your WordPress site with ease.