How to Create and Customize a Twenty Twenty-Three Child Theme

To create a Twenty Twenty-Three child theme, create a folder named twentytwentythree-child inside wp-content/themes. Add a style.css file containing the child theme information and set Template: twentytwentythree. You can then activate the theme from Appearance → Themes.

The WordPress Twenty Twenty-Three theme provides a clean, flexible foundation for blogs, portfolios, business websites, and other content-driven projects. However, directly editing its original files is not a safe way to customize your website.

When the parent theme receives an update, changes made directly inside its folder can be overwritten. A Twenty Twenty-Three child theme solves this problem by keeping your custom styles, templates, and functionality separate from the original theme.

Creating a child theme for Twenty Twenty-Three is slightly different from creating one for a traditional WordPress theme. Twenty Twenty-Three is a block theme built around the Site Editor, block templates, Global Styles, and the theme.json configuration file. Therefore, many design changes that were previously managed through PHP templates and large CSS files are now handled through blocks and JSON settings.

In this guide, you will learn how to:

• Create a Twenty Twenty-Three child theme manually
• Build one without coding using a plugin
• Customize colors, fonts, spacing, and layouts with theme.json
• Add custom CSS and JavaScript
• Override block templates, headers, and footers
• Create custom page templates
• Add block patterns and style variations
• Fix common child theme problems
• Update the parent theme without losing your work

What Is a Twenty Twenty-Three Child Theme?

A Twenty Twenty-Three child theme is a separate WordPress theme that inherits the templates, design settings, patterns, and functionality of the original Twenty Twenty-Three parent theme.

The child theme does not need to duplicate every parent theme file. It only contains the files required for your customizations.

For example, your child theme might contain:

• A style.css file for theme information and custom CSS
• A theme.json file for colors, typography, spacing, and block settings
• A functions.php file for custom PHP functionality
• A custom header.html file
• A custom single.html post template
• A custom style variation
• Additional block patterns

WordPress loads the parent theme as the foundation and then applies the child theme’s files and settings. This allows the parent theme to receive updates while your customizations remain separate.

Is Twenty Twenty-Three a Block Theme?

Yes. Twenty Twenty-Three is a WordPress block theme created to work with Full Site Editing, now commonly called the Site Editor.

Instead of relying mainly on PHP template files such as header.php, footer.php, and single.php, it uses block-based HTML template files.

Twenty Twenty-Three supports:

• The WordPress Site Editor
• Global Styles
• Block templates
• Template parts
• Block patterns
• Style variations
• Fluid typography
• Fluid spacing
• Navigation blocks
• Query Loop blocks

The Site Editor allows you to modify headers, footers, templates, global colors, and typography using blocks.

However, Site Editor changes are generally stored in the WordPress database. A child theme is useful when you want your customizations to be portable, version-controlled, reusable, or stored permanently as files.

Why Should You Use a Child Theme?

A child theme is not required for every website. Small visual changes can often be made directly through the Site Editor.

A child theme becomes useful when you need greater control over the design or functionality.

Protect customizations from parent theme updates

When you edit the original Twenty Twenty-Three files, a theme update may replace them. Changes stored inside a child theme remain separate.

Create reusable customizations

A child theme can be installed on a staging website, moved to another domain, stored in Git, or reused for similar projects.

Override parent theme templates

You can replace a parent template by adding a file with the same name and folder structure to the child theme.

For example:

Parent theme:
twentytwentythree/templates/single.html

Child theme:
twentytwentythree-child/templates/single.html

WordPress will use the child theme version.

Add functionality safely

Custom PHP, CSS, and JavaScript can be added without changing the parent theme.

Build a custom visual system

A child theme.json file can define your brand colors, font sizes, spacing, content widths, button styles, and individual block settings.

Child Theme vs Site Editor vs Custom Plugin

Choosing the right customization method helps keep your website organized.

Customization requirement	Best method
Change site colors or fonts for one website	Site Editor
Adjust a header or footer visually	Site Editor
Save design settings as portable files	Child theme
Override a block template	Child theme
Add theme-specific CSS	Child theme
Add theme-specific PHP	Child theme
Add functionality that should work with any theme	Custom plugin
Create another selectable design preset	Style variation
Completely rebuild the parent theme	Standalone block theme

Use the Site Editor for simple website-specific changes. Use a child theme when those changes must be stored as files or distributed to another website.

Functionality that should continue working after changing themes usually belongs in a plugin rather than a child theme.

What You Need Before Creating the Child Theme

Prepare the following before beginning:

• A WordPress website or local development environment
• The Twenty Twenty-Three parent theme installed
• Access to your hosting File Manager, FTP, SFTP, SSH, or local files
• A text or code editor
• A complete website backup
• A staging environment for testing

Avoid making major theme changes directly on a live website. A PHP syntax error or invalid JSON file can temporarily break part of the site.

Recommended Twenty Twenty-Three Child Theme Structure

A simple child theme can contain only style.css. As the project grows, you can use a more complete structure:

twentytwentythree-child/
├── style.css
├── functions.php
├── theme.json
├── screenshot.png
├── assets/
│   ├── css/
│   │   └── custom.css
│   ├── js/
│   │   └── custom.js
│   └── images/
├── inc/
│   └── theme-functions.php
├── parts/
│   ├── header.html
│   └── footer.html
├── patterns/
│   └── featured-call-to-action.php
├── styles/
│   └── brand-dark.json
└── templates/
    ├── page.html
    ├── single.html
    └── landing-page.html

A complete standalone block theme requires files such as style.css and templates/index.html. A child theme can inherit required templates from its parent, so you only need to add files that you intend to change. Typical block themes organize templates, template parts, patterns, and style variations into separate folders.

Method 1: Create a Twenty Twenty-Three Child Theme Manually

The manual method gives you full control over every file in the theme.

Step 1: Create the Child Theme Folder

Access your WordPress installation through your hosting File Manager, FTP client, or local development environment.

Open:

wp-content/themes/

Inside the themes directory, create a new folder:

twentytwentythree-child

Your folder structure should now look like this:

wp-content/
└── themes/
    ├── twentytwentythree/
    └── twentytwentythree-child/

Do not place the child theme folder inside the parent theme folder. Both folders must be located separately inside wp-content/themes.

Step 2: Create the style.css File

Create a file named:

style.css

Add the following theme header:

/*
Theme Name: Twenty Twenty-Three Child
Theme URI: https://example.com/twentytwentythree-child/
Description: A custom child theme for the WordPress Twenty Twenty-Three theme.
Author: Your Name
Author URI: https://example.com/
Template: twentytwentythree
Version: 1.0.0
Text Domain: twentytwentythree-child
*/

Replace the example URLs and author name with your own information.

The most important line is:

Template: twentytwentythree

The value must exactly match the folder name of the parent theme. WordPress uses this field to determine which theme the child theme should inherit from.

Do not use:

Template: Twenty Twenty-Three

Do not use:

Template: twentytwentythree-child

The correct parent folder value is:

Template: twentytwentythree

Step 3: Add a Theme Screenshot

A screenshot is optional, but it makes your child theme easier to recognize under Appearance → Themes.

Create an image named:

screenshot.png

Place it in the root of the child theme:

twentytwentythree-child/
├── screenshot.png
└── style.css

A landscape image that represents your customized design works best.

Step 4: Install and Activate the Child Theme

When the child theme folder is located directly inside wp-content/themes, go to:

WordPress Dashboard → Appearance → Themes

You should see Twenty Twenty-Three Child.

Click Activate.

The website will initially look almost identical to the parent theme because you have not added any customizations yet.

Installing the child theme as a ZIP file

You can also compress the folder:

twentytwentythree-child.zip

Then go to:

Appearance → Themes → Add New Theme → Upload Theme

Upload the ZIP file, install it, and activate it.

Make sure the ZIP contains the child theme folder and not an unnecessary extra folder level.

Correct:

twentytwentythree-child.zip
└── twentytwentythree-child/
    └── style.css

Incorrect:

twentytwentythree-child.zip
└── child-theme-download/
    └── twentytwentythree-child/
        └── style.css

Step 5: Create a theme.json File

Twenty Twenty-Three is a block theme, so theme.json should be the main tool for global design customization.

Create:

twentytwentythree-child/theme.json

Add this starter configuration:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "appearanceTools": true,
        "layout": {
            "contentSize": "720px",
            "wideSize": "1200px"
        },
        "color": {
            "defaultPalette": false,
            "palette": [
                {
                    "name": "Brand Blue",
                    "slug": "brand-blue",
                    "color": "#2563eb"
                },
                {
                    "name": "Brand Dark",
                    "slug": "brand-dark",
                    "color": "#111827"
                },
                {
                    "name": "Soft Gray",
                    "slug": "soft-gray",
                    "color": "#f3f4f6"
                },
                {
                    "name": "White",
                    "slug": "white",
                    "color": "#ffffff"
                }
            ]
        },
        "spacing": {
            "units": [
                "px",
                "rem",
                "%",
                "vw",
                "vh"
            ]
        },
        "typography": {
            "fluid": true,
            "fontSizes": [
                {
                    "name": "Small",
                    "slug": "small",
                    "size": "0.875rem"
                },
                {
                    "name": "Medium",
                    "slug": "medium",
                    "size": "1rem"
                },
                {
                    "name": "Large",
                    "slug": "large",
                    "size": "1.5rem"
                },
                {
                    "name": "Extra Large",
                    "slug": "extra-large",
                    "size": "clamp(2rem, 5vw, 4rem)"
                }
            ]
        }
    },
    "styles": {
        "color": {
            "background": "var:preset|color|white",
            "text": "var:preset|color|brand-dark"
        },
        "spacing": {
            "blockGap": "1.5rem"
        },
        "typography": {
            "fontSize": "var:preset|font-size|medium",
            "lineHeight": "1.7"
        },
        "elements": {
            "button": {
                "color": {
                    "background": "var:preset|color|brand-blue",
                    "text": "var:preset|color|white"
                },
                "border": {
                    "radius": "6px"
                },
                "typography": {
                    "fontWeight": "600"
                }
            },
            "heading": {
                "color": {
                    "text": "var:preset|color|brand-dark"
                }
            },
            "link": {
                "color": {
                    "text": "var:preset|color|brand-blue"
                },
                ":hover": {
                    "typography": {
                        "textDecoration": "none"
                    }
                }
            }
        },
        "blocks": {
            "core/button": {
                "spacing": {
                    "padding": {
                        "top": "0.75rem",
                        "right": "1.25rem",
                        "bottom": "0.75rem",
                        "left": "1.25rem"
                    }
                }
            }
        }
    }
}

The current theme.json version 3 specification works with WordPress 6.6 and later. It can control editor settings, colors, typography, spacing, layouts, individual blocks, templates, and template parts.

After saving the file, open:

Appearance → Editor → Styles

Your new color palette, button styling, content width, and typography settings should be available.

What happens to the parent theme.json file?

The child theme does not require a complete copy of the parent configuration.

WordPress combines settings from several sources, including:

1. WordPress defaults
2. The parent theme
3. The child theme
4. User customizations saved through the Site Editor

The child theme can override matching parent settings while continuing to inherit settings it does not replace.

Validate the JSON before uploading

JSON is strict. Common mistakes include:

• Missing commas
• Extra commas
• Unmatched braces
• Curved quotation marks
• Comments inside the JSON file
• Incorrect property names

Unlike JavaScript, standard JSON does not support comments such as:

// This is not valid JSON

Validate the file in a JSON validator or a code editor before uploading it.

Step 6: Add Custom CSS

Use theme.json for supported global styles whenever possible. Use CSS for advanced selectors, animations, pseudo-elements, or visual behavior that cannot be defined conveniently through Global Styles.

Add your CSS below the theme information in style.css:

/*
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
Version: 1.0.0
Text Domain: twentytwentythree-child
*/

/* Add a subtle shadow to featured images. */
.wp-block-post-featured-image img {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgb(17 24 39 / 12%);
}

/* Improve navigation link transitions. */
.wp-block-navigation-item__content {
    transition: opacity 0.2s ease;
}

.wp-block-navigation-item__content:hover {
    opacity: 0.7;
}

/* Style a custom call-to-action group. */
.is-style-brand-cta {
    border-radius: 16px;
    padding: clamp(1.5rem, 4vw, 3rem);
}

Step 7: Load the Child Theme Stylesheet

For block themes, loading style.css is optional unless the file contains CSS that must appear on the front end.

Create:

functions.php

Add:

<?php
/**
 * Twenty Twenty-Three Child theme functions.
 */

/**
 * Load the child theme stylesheet.
 */
function twentytwentythree_child_enqueue_styles() {
    wp_enqueue_style(
        'twentytwentythree-child-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
}

add_action(
    'wp_enqueue_scripts',
    'twentytwentythree_child_enqueue_styles'
);

This code loads the active child theme’s style.css file.

Do not automatically enqueue the parent theme’s style.css with:

get_template_directory_uri() . '/style.css'

Twenty Twenty-Three is a block theme, and much of its styling comes from theme.json and generated block styles rather than a traditional parent stylesheet.

WordPress recommends examining what the parent theme loads and only enqueueing the files that are actually needed. The official child theme documentation also notes that loading style.css is often unnecessary for block themes unless custom CSS has been added.

Do not add the PHP closing tag at the end of functions.php. Leaving it out helps prevent accidental whitespace from being sent to the browser.

Step 8: Load a Separate CSS File

For larger projects, keep the theme header inside style.css and place your main custom styles in:

assets/css/custom.css

Use this code in functions.php:

<?php
/**
 * Load child theme assets.
 */
function twentytwentythree_child_enqueue_assets() {
    $theme = wp_get_theme();

    wp_enqueue_style(
        'twentytwentythree-child-custom',
        get_theme_file_uri( 'assets/css/custom.css' ),
        array(),
        $theme->get( 'Version' )
    );
}

add_action(
    'wp_enqueue_scripts',
    'twentytwentythree_child_enqueue_assets'
);

The version number helps browsers recognize when the stylesheet changes after you increase the child theme version.

Step 9: Add Custom JavaScript

Create:

assets/js/custom.js

Example:

document.addEventListener('DOMContentLoaded', () => {
    document.body.classList.add('child-theme-loaded');
});

Load the file through functions.php:

<?php
/**
 * Load child theme scripts.
 */
function twentytwentythree_child_enqueue_scripts() {
    $script_path = get_theme_file_path( 'assets/js/custom.js' );

    if ( ! file_exists( $script_path ) ) {
        return;
    }

    wp_enqueue_script(
        'twentytwentythree-child-script',
        get_theme_file_uri( 'assets/js/custom.js' ),
        array(),
        filemtime( $script_path ),
        true
    );
}

add_action(
    'wp_enqueue_scripts',
    'twentytwentythree_child_enqueue_scripts'
);

The file_exists() check prevents WordPress from attempting to load a missing file. The filemtime() value automatically changes when the file is edited, helping prevent browser caching problems during development.

Step 10: Add Custom PHP Functionality

You can use functions.php to add theme-specific PHP features.

For example, add a custom body class:

<?php
/**
 * Add a custom body class.
 *
 * @param string[] $classes Existing body classes.
 * @return string[]
 */
function twentytwentythree_child_body_classes( $classes ) {
    $classes[] = 'using-twentytwentythree-child';

    return $classes;
}

add_filter(
    'body_class',
    'twentytwentythree_child_body_classes'
);

The child and parent functions.php files are both loaded. The child file does not replace the parent file. Avoid copying the entire parent functions.php into the child theme because duplicated function names may create fatal errors.

For extensive functionality that should remain active when the theme changes, create a custom plugin instead.

How to Override Twenty Twenty-Three Templates

Block theme templates use .html files containing WordPress block markup.

Common Twenty Twenty-Three templates include:

templates/
├── 404.html
├── archive.html
├── blank.html
├── blog-alternative.html
├── home.html
├── index.html
├── page.html
├── search.html
├── single.html
└── singular.html

The exact files can vary by theme version.

Override the single post template

To customize individual blog posts:

1. Open the parent theme folder.
2. Locate templates/single.html.
3. Create a templates folder inside the child theme.
4. Copy single.html into the child folder.
5. Edit only the child copy.

Your structure should be:

twentytwentythree-child/
└── templates/
    └── single.html

WordPress will use the child version instead of the matching parent template. Child themes can override templates, template parts, and patterns by providing files with matching names.

Do not edit block template HTML as ordinary webpage HTML. The files contain block comments such as:

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-content /-->
</main>
<!-- /wp:group -->

Incorrect block markup may cause WordPress to report invalid or unexpected content.

Customize templates through the Site Editor

You can also edit a template visually:

1. Go to Appearance → Editor.
2. Select Design or Templates.
3. Open the required template.
4. Add, remove, or rearrange blocks.
5. Save the changes.

Remember that these changes may initially be stored in the database rather than written into your child theme folder.

To make the changes portable, use the Create Block Theme plugin to save or export them as theme files.

How to Customize the Header

Twenty Twenty-Three uses a block template part for its header.

To override it manually:

1. Create a parts folder inside the child theme.
2. Copy the parent theme’s parts/header.html.
3. Paste it into the child theme.
4. Modify the copied block markup.

The result should be:

twentytwentythree-child/
└── parts/
    └── header.html

You can also customize the header visually:

1. Go to Appearance → Editor.
2. Open Design → Patterns.
3. Select Manage all my patterns or Template Parts.
4. Open the header.
5. Modify the logo, Site Title, Navigation block, buttons, spacing, or colors.
6. Save the changes.

Block theme template parts must be stored inside the /parts directory. Common template parts include header.html, footer.html, comments.html, and sidebar.html.

How to Customize the Footer

To create a custom footer file, copy:

twentytwentythree/parts/footer.html

Into:

twentytwentythree-child/parts/footer.html

You can then add:

• Copyright information
• Footer navigation
• Social icons
• Contact information
• Newsletter blocks
• Business hours
• Legal policy links
• Additional columns

A simple block footer might look like:

<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"2rem","bottom":"2rem"}}},"backgroundColor":"brand-dark","textColor":"white","layout":{"type":"constrained"}} -->
<footer class="wp-block-group has-white-color has-brand-dark-background-color has-text-color has-background" style="padding-top:2rem;padding-bottom:2rem">
    <!-- wp:paragraph {"align":"center"} -->
    <p class="has-text-align-center">
        Copyright © Your Website. All rights reserved.
    </p>
    <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

The brand-dark and white slugs must exist in your theme.json color palette.

How to Create a Custom Page Template

A custom page template gives editors another layout option when creating a page or post.

For example, you might create a landing page without the standard title area.

Step 1: Register the template in theme.json

Add customTemplates to your existing configuration:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "customTemplates": [
        {
            "name": "landing-page",
            "title": "Landing Page",
            "postTypes": [
                "page"
            ]
        }
    ]
}

When adding this to a larger theme.json file, merge it with the existing top-level properties. Do not create a second root JSON object.

Step 2: Create the template file

Create:

templates/landing-page.html

Add:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

WordPress allows custom single post, page, and custom post type templates to be registered through the customTemplates property. The corresponding HTML file must be stored inside the theme’s /templates folder.

You can select the new template from the page editor’s Template setting.

How to Create a Custom Block Pattern

Patterns allow users to insert predesigned groups of blocks into posts, pages, or templates.

Create:

patterns/featured-call-to-action.php

Add:

<?php
/**
 * Title: Featured Call to Action
 * Slug: twentytwentythree-child/featured-call-to-action
 * Categories: call-to-action, featured
 * Description: A branded call-to-action section with a heading and button.
 */
?>

<!-- wp:group {"align":"full","backgroundColor":"soft-gray","layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-group alignfull has-soft-gray-background-color has-background" style="padding-top:4rem;padding-right:1.5rem;padding-bottom:4rem;padding-left:1.5rem">

    <!-- wp:heading {"textAlign":"center","fontSize":"extra-large"} -->
    <h2 class="wp-block-heading has-text-align-center has-extra-large-font-size">
        Build a Better WordPress Website
    </h2>
    <!-- /wp:heading -->

    <!-- wp:paragraph {"align":"center"} -->
    <p class="has-text-align-center">
        Create a flexible website using modern WordPress blocks and reusable design settings.
    </p>
    <!-- /wp:paragraph -->

    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons">
        <!-- wp:button -->
        <div class="wp-block-button">
            <a class="wp-block-button__link wp-element-button">Get Started</a>
        </div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->

</div>
<!-- /wp:group -->

After saving the file, search for Featured Call to Action in the WordPress pattern inserter.

Use a unique pattern slug to avoid conflicts with plugins or other themes.

How to Create a Style Variation

A style variation allows users to switch between different visual systems without changing the main theme.

Create:

styles/brand-dark.json

Add:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "title": "Brand Dark",
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Blue",
                    "slug": "blue",
                    "color": "#60a5fa"
                },
                {
                    "name": "Dark",
                    "slug": "dark",
                    "color": "#030712"
                },
                {
                    "name": "Light",
                    "slug": "light",
                    "color": "#f9fafb"
                }
            ]
        }
    },
    "styles": {
        "color": {
            "background": "var:preset|color|dark",
            "text": "var:preset|color|light"
        },
        "elements": {
            "link": {
                "color": {
                    "text": "var:preset|color|blue"
                }
            },
            "button": {
                "color": {
                    "background": "var:preset|color|blue",
                    "text": "var:preset|color|dark"
                }
            }
        }
    }
}

Go to:

Appearance → Editor → Styles → Browse styles

The Brand Dark variation should appear as a selectable option.

Style variation files belong in the /styles folder and work as variations of theme.json. Unlike a full child theme, a style variation is limited to JSON-based design settings.

Method 2: Create a Twenty Twenty-Three Child Theme Without Coding

The official Create Block Theme plugin provides a faster option for users who prefer to customize their website through the Site Editor.

The plugin can:

• Create a child theme from the active theme
• Create a standalone theme
• Clone the active theme
• Create style variations
• Save Site Editor changes into theme files
• Inspect theme.json
• Export the theme as a ZIP file

These features are documented on the plugin’s official WordPress.org page.

Step 1: Back up the website

Create a full website backup before using development tools that can save changes directly into theme files.

Step 2: Install Twenty Twenty-Three

Go to:

Appearance → Themes → Add New Theme

Search for Twenty Twenty-Three, install it, and activate it.

Step 3: Install Create Block Theme

Go to:

Plugins → Add New Plugin

Search for:

Create Block Theme

Install and activate the official plugin by WordPress.org.

Step 4: Customize the website

Open:

Appearance → Editor

Use the Site Editor to customize:

• Colors
• Typography
• Layout
• Header
• Footer
• Templates
• Template parts
• Navigation
• Block styles
• Fonts

Save your changes.

Step 5: Create the child theme

Inside the Site Editor, open the Create Block Theme panel.

Select:

Create Theme → Create Child Theme

Enter the required theme information, such as:

• Theme name
• Theme slug
• Description
• Author
• Author URL
• Theme URL

Create the theme.

The plugin creates a child theme using the active parent theme and includes changes made through the Site Editor.

Step 6: Export the child theme

Open the Create Block Theme panel again and select:

Export ZIP

Save the ZIP file as a backup or install it on another WordPress website.

Because the plugin can write permanent changes to the theme, it should be treated as a development tool and used carefully, preferably on a staging or local website.

Manual Method vs Create Block Theme Plugin

Feature	Manual method	Plugin method
Coding required	Yes	Minimal
Control over files	Complete	High
Best for developers	Yes	Yes
Best for beginners	Moderate difficulty	Easier
Saves Site Editor changes	Manual process	Built in
Creates ZIP file	Manually	Automatically
Supports style variations	Yes	Yes
Suitable for version control	Yes	Yes
Risk of accidental file changes	Lower with careful editing	Higher when saving directly

The plugin method is useful for visually building the theme. The manual method is useful when you need precise control over every file and code change.

Common Twenty Twenty-Three Child Theme Problems and Solutions

Even a small filename or syntax mistake can stop a child theme from working correctly.

The child theme does not appear in WordPress

Check the following:

• The file is named exactly style.css
• style.css is located in the root of the child theme
• The theme header is at the top of the file
• The Theme Name field is present
• The Template field is set to twentytwentythree
• The parent theme is installed
• The folder is not nested incorrectly
• File permissions allow WordPress to read the theme

A minimal working style.css is:

/*
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
*/

WordPress says the parent theme is missing

The parent theme must remain installed even while the child theme is active.

Confirm that this folder exists:

wp-content/themes/twentytwentythree/

The parent theme does not need to be active, but it must be installed.

The child theme CSS is not loading

Possible causes include:

• style.css has not been enqueued
• A cache is serving an older file
• Another rule has greater CSS specificity
• The CSS selector does not match the current block markup
• A Site Editor style is overriding the rule
• The CSS contains a syntax error
• A performance plugin has combined or delayed the stylesheet

Add this to functions.php:

<?php
function twentytwentythree_child_enqueue_styles() {
    wp_enqueue_style(
        'twentytwentythree-child-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
}

add_action(
    'wp_enqueue_scripts',
    'twentytwentythree_child_enqueue_styles'
);

Then:

1. Clear the WordPress cache.
2. Clear your CDN cache.
3. Clear the browser cache.
4. Open the page in a private browser window.
5. Inspect the page source or browser Network panel.
6. Confirm that the child stylesheet is being loaded.

theme.json changes are not appearing

Site Editor customizations stored in the database can override settings from theme files.

Try:

1. Backing up your current styles.
2. Opening Appearance → Editor → Styles.
3. Opening the additional options menu.
4. Selecting the option to reset styles, when appropriate.
5. Clearing all website caches.
6. Validating the JSON syntax.
7. Confirming that theme.json is in the child theme root.
8. Confirming that the child theme is active.

Do not reset production-site styles without a backup because database-based customizations may be removed.

Template changes are not appearing

A database-saved template may override the file inside your child theme.

To investigate:

1. Open the template in the Site Editor.
2. Check whether it has been customized.
3. Back up the current version.
4. Use the template options to clear or reset the customized version.
5. Reload the website.

Also verify that the template file:

• Uses the correct filename
• Is inside the /templates folder
• Contains valid block markup
• Matches the template being used by the page

Header or footer changes are not visible

Check whether the active template references the expected template part slug:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

A template that references a different header slug will not use parts/header.html.

Also check for a database-saved version of the template part.

functions.php causes a fatal error

Common causes include:

• Missing semicolons
• Unmatched parentheses or braces
• Duplicate function names
• Copying functions from the parent theme
• Using an unsupported PHP feature
• Calling a missing file
• Adding code before the opening <?php tag

Enable WordPress debugging in a staging environment to identify the error.

Do not display PHP errors publicly on a live website.

The uploaded theme ZIP is invalid

Open the ZIP and confirm that the structure is:

twentytwentythree-child/
├── style.css
├── functions.php
└── theme.json

The archive should not contain unrelated backup folders, system files, or another ZIP file.

Changes disappeared after switching themes

Site Editor customizations are associated with a theme. Switching themes can make those customizations unavailable because the new theme uses different templates and settings.

Keep an exported copy of your child theme and document any database-level customizations before switching.

Best Practices for Twenty Twenty-Three Child Theme Development

Use a staging or local environment

Test the child theme away from the live website. This protects visitors from broken templates, invalid JSON, or PHP errors.

Keep the parent theme updated

The child theme depends on Twenty Twenty-Three. Parent theme updates can include bug fixes, compatibility improvements, and security-related changes.

Back up and test before updating.

Never edit parent theme files

All modifications should be stored in the child theme, a custom plugin, or the Site Editor.

Override only what you need

Do not copy the entire parent theme into the child theme.

Copying unnecessary files makes the child theme harder to maintain and prevents future parent improvements from being inherited automatically.

Prefer theme.json for supported design changes

Use theme.json for:

• Color palettes
• Gradients
• Font sizes
• Font families
• Content width
• Wide width
• Spacing
• Borders
• Shadows
• Element styles
• Block styles

Use CSS for requirements that are not adequately supported through theme.json.

Use unique function prefixes

Prefix custom PHP functions with the project or child theme name:

twentytwentythree_child_

Avoid generic names such as:

load_styles()

Generic function names are more likely to conflict with plugins or other themes.

Escape dynamic output

When writing PHP templates or functions, use appropriate WordPress escaping functions such as:

esc_html()
esc_attr()
esc_url()
wp_kses_post()

Sanitize and validate input

Custom settings, forms, and saved data should be sanitized and validated before being stored or displayed.

Keep functionality separate from presentation

Theme-specific display code belongs in the child theme. Critical functionality should usually be placed in a plugin so it is not lost when the theme changes.

Examples of plugin-level functionality include:

• Custom post types
• Business logic
• API integrations
• Shortcodes required by content
• User account features
• Checkout functionality
• Permanent tracking or data processing

Use version control

Git allows you to:

• See what changed
• Restore an earlier version
• Work safely with a team
• Review code before deployment
• Maintain separate development and production branches

Increase the theme version after changes

Update this line in style.css:

Version: 1.0.1

When the version is used while enqueueing assets, browsers are more likely to load the latest files.

Document customizations

Add comments and maintain a README.txt explaining:

• What the child theme changes
• Which parent theme version was tested
• Which WordPress version was tested
• Which templates were overridden
• Which plugins are required
• How the theme should be deployed

When Should You Avoid Using a Child Theme?

A child theme may not be the best solution in every situation.

Avoid creating one when:

• You only need a small color or typography change through the Site Editor
• The customization should remain active with every theme
• The project is becoming a completely different theme
• You only need another visual preset
• The parent theme is no longer suitable for your website

For a large redesign that replaces most parent templates, settings, and patterns, creating a standalone block theme may be easier to maintain.

WordPress documentation notes that extremely extensive child theme customizations can eventually become difficult to manage. In such cases, creating an independent theme may be more appropriate.

Final Thoughts

A Twenty Twenty-Three child theme gives you a safe and organized way to customize one of WordPress’s flexible block themes.

For a basic child theme, start with:

twentytwentythree-child/
└── style.css

For a more advanced project, add:

functions.php
theme.json
templates/
parts/
patterns/
styles/
assets/

Use theme.json for the main global design system, CSS for unsupported visual details, block templates for structural layouts, and functions.php for carefully scoped theme functionality.

The manual method provides the most control, while the Create Block Theme plugin offers a convenient visual workflow for creating and exporting a child theme.

Whichever method you choose, keep the original Twenty Twenty-Three theme installed, avoid editing its files, create regular backups, and test important changes in a staging environment. This will allow you to update the parent theme while keeping your custom WordPress design protected and maintainable.

Frequently Asked Questions

This page was last edited on 15 July 2026, at 6:31 pm