As WordPress continues evolving with full site editing and block-based themes, customizing your site’s appearance is more powerful—and complex—than ever. The introduction of theme.json and block themes has streamlined design, but many users still need a way to personalize their sites safely and flexibly.
That’s where the WordPress child theme comes in.
A child theme allows you to safely tweak a theme’s design and functionality without modifying the original (parent) theme. It’s especially useful for block theme styling where fine control over layout, typography, color, and specific block behavior is needed.
In this post, you’ll learn how to build and use a child theme with WordPress block themes. We’ll cover theme.json, CSS overrides, PHP-based block style registration, and even the newest JSON-only method introduced in WordPress 6.6.
Have you tried creating your own WordPress child theme yet?
Table of Contents
1. Importance of Child Themes for Block Themes
Even with modern block themes, child themes remain essential. Why? Because customizing the parent theme directly is risky—any theme update could wipe out your changes.
A WordPress child theme acts as a safe sandbox. It inherits all files, templates, and configurations from the parent while allowing you to override specific styles or functions.
Why use one?
- Safeguard your changes during parent theme updates.
- Make only the modifications you need.
- Maintain clean, organized, and portable customizations.
For block theme styling, child themes give you space to experiment without altering the original structure.
Actionable Tip: Always create a child theme before starting any custom styling in a block theme.
What have you customized so far in your current theme?
2. Why Block Themes and theme.json Don’t Make Child Themes Obsolete
The rise of theme.json has led many to believe child themes are no longer needed. While theme.json centralizes design control, it doesn’t eliminate the need for separate environments for customization.
In fact, child themes make theme.json more powerful. You can:
- Extend the parent theme’s settings safely.
- Override only specific parts of the design.
- Mix in traditional CSS or PHP-based tweaks as needed.
Without a child theme, you risk breaking the parent theme or losing your work in future updates.
Actionable Tip: Use theme.json inside your child theme to override global and block-specific settings cleanly.
Do you prefer editing theme.json or working directly with CSS?
3. Benefits of Using a Child Theme for Full Styling Control
Creating a child theme unlocks full control over your site’s design while preserving update compatibility. With a WordPress child theme, you can:
- Add your own
theme.jsonsettings - Include custom block styles
- Register new style variations
- Enqueue your own CSS and scripts
Most importantly, you can take advantage of block theme styling without limitations.
You’re not just customizing; you’re building a sustainable, scalable design system.
Actionable Tip: Use a child theme when you expect to make multiple design-level changes across blocks.
What kind of design changes do you plan to make using a child theme?
4. Registering a Block Child Theme
To get started, you’ll need:
- A folder in
/wp-content/themes/(e.g.,twentytwentyfive-child) - A
style.cssfile with a theme header - A
theme.jsonfile (mandatory for block themes)
Example: style.css
/*
Theme Name: Twenty Twenty-Five Child
Description: A custom child theme
Author: Your Name
Template: twentytwentyfive
Version: 1.0
*/
Optional: functions.php if you need to enqueue styles or add PHP-based features.
As long as style.css and theme.json are present, WordPress will detect the theme.
Actionable Tip: Match the Template: value to your parent theme folder name exactly.
Have you created a theme folder and added the required files yet?
5. Making Basic Style Changes
To update colors and block styles globally, use your child theme’s theme.json.
Example: theme.json
{
"version": 3,
"settings": {
"color": {
"palette": [
{"name": "Black", "slug": "black", "color": "#000000"},
{"name": "Yellow", "slug": "yellow", "color": "#FFFF00"},
{"name": "Purple", "slug": "purple", "color": "#800080"},
{"name": "White", "slug": "white", "color": "#FFFFFF"}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}
Tweetable Quote: “Global and block-level design control is just a theme.json file away. Child themes keep it clean and future-proof.”
Actionable Tip: Start with small changes like background and text colors to test your child theme.
Which block would you like to customize first?
6. Overriding Existing Style Variations
WordPress block themes support style variations. You can override these with custom JSON files.
Steps:
- Create a file like
01-evening.jsonin your child theme or/styles/folder. - Add specific overrides for blocks.
Example: 01-evening.json
{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "#FFFFFF",
"width": "3px",
"style": "dashed"
}
}
}
}
}
Tweetable Quote: “Want to tweak a specific style variation? Just drop a new JSON file into your child theme’s folder. No PHP needed.”
Actionable Tip: Match the naming convention of the parent theme’s variations to ensure proper inheritance.
Which variation are you planning to override first?
7. Creating a New Style Variation
Let’s build a new look entirely. Create a file like kinsta.json in /styles/ (you can rename it as needed).
Example: styles/custom-style.json
{
"version": 3,
"title": "Dark Orange",
"settings": {
"color": {
"palette": [
{"name": "Primary", "slug": "primary", "color": "#261e1e"},
{"name": "Secondary", "slug": "secondary", "color": "#ff2900"},
{"name": "White", "slug": "white", "color": "#FFFFFF"}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "#ffffff",
"width": "4px",
"style": "dotted"
}
}
}
}
}
Tweetable Quote: “New style variation in a block theme? Just one JSON file unlocks a brand-new design.”
Actionable Tip: Give your variation a unique name and test it in the Site Editor preview.
Have you tried making your own style variation yet?
8. Enqueueing style.css and Adding Custom CSS
While theme.json handles design tokens, you might still want traditional CSS for specific tweaks.
Add to your functions.php:
<?php
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('twentytwentyfive-child-style', get_stylesheet_uri());
});
Write custom CSS in style.css:
.wp-block-button__link {
text-transform: uppercase;
transition: background-color 0.3s ease-in-out;
}
Actionable Tip: Use CSS for micro-interactions, animations, or block targeting that theme.json can’t handle.
Which CSS tweaks do you want to make?
9. Adding Custom Block Styles Using PHP + CSS
You can register named style options that show up in the block editor sidebar.
Add to functions.php:
<?php
register_block_style('core/image', [
'name' => 'fancy-shadow',
'label' => 'Fancy Shadow',
'style_handle' => 'twentytwentyfive-child-style'
]);
Add to style.css:
.is-style-fancy-shadow {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border-radius: 12px;
}
Actionable Tip: Use this method when you want non-global style controls editors can toggle per block.
Have you registered any custom block styles yet?
10. Using JSON-Only Block Styles (No PHP Needed)
From WordPress 6.6+, you can register block styles using JSON files alone.
Steps:
- Create a file like
/block-styles/image/fancy-shadow.json - Add style name, label, and inline CSS.
Example: block-styles/image/fancy-shadow.json
{
"name": "fancy-shadow",
"label": "Fancy Shadow",
"inline": ".is-style-fancy-shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.3); border-radius: 12px; }"
}
Tweetable Quote: “WordPress 6.6+ lets you create custom block styles with just JSON. No PHP required.”
Actionable Tip: Place block-style JSON files in /block-styles/{block-name}/ for auto-registration.
Final Thoughts
Child themes remain powerful tools for customizing WordPress block themes safely and sustainably. Whether you prefer JSON, CSS, PHP, or all three, a child theme gives you full freedom without compromising your site’s stability.
From global styles to block-level tweaks, variation overrides to editor-facing custom styles, everything starts with a good child theme.