WordPress Hybrid Themes: What They Are, Why They Matter, and How to Build One in 2025

The WordPress 5.9 version release brought Full Site Editing, which enabled users to manage all site elements through blocks, including headers & footers, and sidebars.

But some people weren’t ready to switch. Many developers are stuck with classic themes, largely due to long-standing plugin dependencies and custom code that’s not easy to replicate with blocks.

That shows in the numbers too. According to WPBakery, 70% of new themes published in the past two years are still classic.

Hybrid themes offer a perfect middle ground. They combine the structure of classic WordPress themes with key block features, making them a practical choice for projects that need flexibility without a full rebuild.

In this post, we’ll look at what they are, how they work, when to use them, and how to convert a classic theme into a hybrid theme.

Let’s get started…

What is a WordPress Hybrid Theme?

A WordPress hybrid theme is a mix of classic and block themes. It works like a classic theme but adds some modern features from Full Site Editing (FSE).

You still use familiar files like archive.php or search.php. At the same time, you can use block parts, global styles, and some Site Editor tools.

It’s great if you want more design control but aren’t ready to switch fully to a block theme.

To be clear, WordPress doesn’t list hybrid as an official theme type. Only classic themes and block themes are recognized. But many developers use the term “hybrid” to describe themes that mix the best of both worlds.

Hybrid themes are especially helpful if you have custom code you want to keep while exploring newer design features.

Managed WordPress Hosting That Handles Themes Without Slowing Your Site!

With Cloudways’ optimized LAMP + NGINX hybrid stack, enjoy fast performance even with heavy blogging themes. Improve your site’s speed and rank better on Google today.

Experience Now

Classic vs. Hybrid vs. Block Themes – At a Glance

WordPress theme types work differently. Choosing between classic, hybrid, or block themes affects your control and how ready your site is for the future. Here’s a quick comparison.

Feature	Classic Theme	Hybrid Theme	Block Theme
Templates	PHP-based	PHP + optional block templates	Fully block-based
theme.json	Not used or minimal	Partially supported	Fully supported
Full Site Editing	Not supported	Partial support	Fully supported
Customizer	Fully supported	Supported	Not supported
Widgets	Classic widgets	Classic + Block Widgets	Block widgets only
Developer Control	High (PHP, hooks)	High (PHP + block features)	Mostly visual-based
User Editing Control	Low	Medium	High
Plugin Compatibility	Excellent	Generally good	Varies

When Each Theme Type Makes Sense

Classic themes are a fit when you’re working on older sites that depend on custom PHP, legacy plugins, or workflows that don’t need modern editing tools. They’re reliable, but not built for the direction WordPress is heading.

Block themes are built for Full Site Editing. They suit projects where clients need more hands-on control without developer help. If you’re starting from scratch and want a future-focused setup, this is the go-to.

Hybrid themes combine the best features, letting developers use modern tools like theme.json and block templates while still supporting PHP and the Customizer. If you’re handling websites for various clients, with different levels of complexity, hybrids provide adaptability without fully committing to blocks.

When Should You Opt for a WordPress Hybrid Theme?

Hybrid themes aren’t just a halfway step. They’re a smart choice for developers who want gradual modernization without losing stability.

They let you start adopting block-based features where it makes sense while keeping legacy systems intact. For agencies juggling multiple client setups, this can be a major win.

What Makes a Theme Hybrid?

Hybrid themes use some modern WordPress features but still rely on the older structure. Here’s what typically sets them apart:

Block Editor Support Without Full FSE

You can create and edit content using the Block Editor, but you’re not locked into Full Site Editing. The layout still relies on traditional PHP templates like index.php or single.php.

Customizer Remains Available

Hybrid themes don’t ditch the WordPress Customizer. You can still manage site identity, menus, homepage settings, and other visual tweaks from the dashboard.

Mix of Block and Legacy Widgets

They support both block-based widgets and classic widgets. That means older plugins still work, and site owners aren’t forced into using blocks everywhere.

Limited Use of theme.json

Instead of relying completely on theme.json, hybrid themes use it selectively. It might define things like color palettes or typography settings, but layout decisions stay in PHP.

Compatible With Most Plugins

Since the theme still employs the classic setup, most plugins are compatible and work out of the box. WooCommerce, ACF, SEO tools, and page builders don’t encounter issues that sometimes arise in full block themes.

How a Hybrid Theme is Structured (Developer View)

From a developer’s perspective, hybrid themes offer a flexible layout that blends classic PHP templates with newer block-based files, all within the same theme folder.

1. Dual Architecture

Hybrid themes maintain the standard PHP template hierarchy (index.php, single.php, archive.php, etc.) while supporting modern files like theme.json and block-based templates or parts. This makes it easy to enhance layouts without overhauling existing logic.

2. Theme Folder Layout

Inside the theme folder, you’ll find a setup that reflects this dual approach. Alongside traditional template files, hybrid themes include directories like /parts/, /patterns/, and a theme.json file, though the theme.json is typically minimal and focused on style definitions rather than full layout control.

Typical structure:

/theme-name

|── index.php

|── page.php

|── functions.php

|── header.php

|── footer.html (block template part)

|── parts/

|   └── hero-section.html

|── patterns/

|   └── featured-posts.php

|── style.css

|── theme.json

3. Mixing Template Approaches

A big reason developers go for a hybrid approach is flexibility. You don’t have to change everything at once. For instance, maybe you leave your main content loop inside index.php, but switch the footer to use block_template_part(). That way, you or your client can edit it from the block editor without touching theme files.

This makes it easier to update sections like banners or promotional callouts. You get the benefits of blocks where they matter most, without needing to rebuild your entire theme.

It’s also handy if you’re handling multiple client sites. A hybrid setup means you can slowly improve parts of each site over time, keeping things organized while still having full control over performance and layout.

Now that the structure’s clear, let’s take a look at how to start adding block features to your classic theme.

How to Add Block Features to a Classic Theme

Now let me walk you through transforming a classic WordPress theme like Twenty Twenty-One into a hybrid theme.

Prerequisites:

Before we begin, make sure you have:

• A working WordPress installation (local or staging environment is highly recommended,  never do this directly on a live site). I’ll be using Cloudways to host my WordPress site as they offer free staging.
• A classic (non-FSE) theme installed and active (we’ll use Twenty Twenty-One in this guide).
• Access to your WordPress theme files (via FTP, a file manager in your hosting control panel, or a local development tool like Local by WP Engine).
• A text editor (like VS Code, Sublime Text, or Notepad++).

Step 1: Create a Child Theme

Before making any changes to your WordPress theme, it’s important to create a child theme. That way, your customizations won’t disappear when the parent theme is updated.

A child theme copies all the styles and functions of the original theme. You can safely add or change code without affecting the main files.

Using a child theme is a smart way to keep your work safe and future-proof.

So to do this:

• Using your file manager or FTP client, go to wp-content/themes/. I’ll use FileZilla for this.

• And inside wp-content/themes/, create a new folder. Let’s call it twentytwentyone-hybrid.

• Open your text editor and add the following code:

/*
 Theme Name:   Twenty Twenty-One Hybrid Child
 Theme URI:    https://example.com/
 Description:  My custom hybrid child theme for Twenty Twenty-One.
 Author:       Your Name
 Author URI:   https://example.com/
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyone-hybrid
*/

• Theme Name: This is what will appear in your WordPress admin.
• Template: This tells WordPress that twentytwentyone is the parent theme. Make sure it exactly matches the parent theme’s folder name.
• Now save the file as style.css and drag this file in the twentytwentyone-hybrid folder.

• Now we’re going to create another file named functions.php inside the twentytwentyone-hybrid folder.

• Open file and add the following code:

<?php
/**
 * Twenty Twenty-One Hybrid Child functions and definitions
 */

// Enqueue parent theme styles. This ensures your child theme inherits the parent's CSS.
function twentytwentyone_hybrid_child_enqueue_styles() {
    wp_enqueue_style( 'twentytwentyone-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentytwentyone-hybrid-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'twentytwentyone-style' ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_hybrid_child_enqueue_styles' );

//

You’ll add more functions here later to introduce hybrid features.

What’s going on here:

wp_enqueue_style(): This function correctly loads the parent theme’s stylesheet first, and then your child theme’s stylesheet. This is the recommended way to ensure proper styling inheritance.

• Go to your WordPress Dashboard (Appearance > Themes).
• You should now see “Twenty Twenty-One Hybrid Child” listed.

• Click “Activate.” Your site should look exactly the same as before, but now you’re safely working within your child theme.

Step 2: Add a theme.json File for Global Styles

The theme.json file lets you define site-wide design settings like colors, typography, and spacing. It’s a simple way to start layering block-based features into a classic theme setup.

What we’re doing: Adding a theme.json file to define default colors, typography, and layout options for blocks.

Why we’re doing it: To centralize styling, give users more control over block appearance, and enable new block editor features.

Here’s how we’ll do this:

• Inside your twentytwentyone-hybrid folder, create a new file named theme.json.

• Open it and add the following basic JSON structure:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "foreground",
                    "color": "#000000",
                    "name": "Foreground"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                },
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#6d6d6d",
                    "name": "Secondary"
                }
            ]
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
                    "name": "System Font",
                    "slug": "system-font"
                }
            ],
            "lineHeight": true
        },
        "layout": {
            "contentSize": "720px",
            "wideSize": "1200px"
        }
    },
    "styles": {
        "blocks": {
            "core/paragraph": {
                "color": {
                    "text": "var(--wp--preset--color--foreground)"
                }
            },
            "core/heading": {
                "color": {
                    "text": "var(--wp--preset--color--primary)"
                }
            }
        }
    }
}

The sample theme.json file below sets up basic global styles for your WordPress theme. It defines a custom color palette, uses a system font stack for better performance, and sets layout widths for content.

Default text colors for paragraphs and headings are also included. These colors are based on variables from the custom palette you define earlier in the file.

Test the changes:

• Go to your WordPress Dashboard and create a new post or page (Posts > Add New or Pages > Add New).

Note: If the Classic Editor plugin is active, it blocks all block-based features. To use your hybrid theme properly, go to Plugins > Installed Plugins and deactivate it.

• Add a Paragraph and a Heading block.

• Select the Paragraph block. In the block settings sidebar (usually on the right), you should now see your custom color palette under “Color.” Try changing the text color.

• Do the same for the Heading block. Notice how the default color for headings is now “Primary” (blue) as defined in your theme.json.

• We can also test Group or Column blocks. You’ll also notice that Group or Columns now respect the layout settings defined in our theme.json file. Since we’ve set contentSize to 720px and wideSize to 1200px, these blocks will automatically stay within those limits.

},
        "layout": {
            "contentSize": "720px",
            "wideSize": "1200px"
        }

• Insert a List block. You’ll see the text inherits the custom font stack and base font size we declared.

• We can also test Buttons blocks. You’ll notice it pulls background and text color options from our color palette.

That’s it. The Twenty Twenty-One theme now functions as a hybrid theme because we added a theme.json file and enabled block editor support, and applied a design system for typography and colors, and layout.

We tested common blocks like Paragraphs, Headings, Lists, Buttons, Groups, and Columns to ensure everything behaves as intended.

You can proceed with theme development by adding block-based elements and custom styles and patterns according to your requirements.

Ideal Use Cases for Hybrid Themes

Hybrid themes are a great middle ground. They work well when you want some block features but aren’t ready to go fully block-based. Here are some use cases that might help you better understand why a lot of websites go for a hybrid theme setup.

1. Updating Older Sites Without Rebuilding Everything

If you manage an older site built with PHP templates, switching to Full Site Editing can be overwhelming. A hybrid theme lets you modernize gradually by adding a theme.json file and block support where needed.

2. Keeping Plugin Setups Working As-Is

Some plugins, especially older ones, still rely on classic templates. A hybrid theme lets you keep your current setup while improving the editor and styling experience.

3. Giving Content Editors More Control

Maybe your clients don’t want total freedom, just the ability to drop in a new paragraph, heading, or image. Hybrid themes give them those tools without opening up the whole layout to change.

4. Staying Fast and Lightweight

If performance matters, going hybrid gives you more control over what loads. You can stick with minimal CSS and scripts, and still use the block editor with your custom palette, spacing, and fonts.

How to Develop Hybrid WordPress Themes on Cloudways

Before working on a hybrid theme, you’ll need a working WordPress site. Cloudways makes that setup easier, so here’s how to get things running.

Step 1: Create an Account or Log In

Head to the Cloudways Platform. If you don’t already have an account, sign up to get your 3-day free trial (no cc required).

Step 2: Launch a New WordPress App

• Once you’re in the dashboard, click the “Add Server” button. From the application list, choose WordPress.

• Name both your app and the server.

Step 3: Choose a Cloud Provider

Pick your preferred cloud provider from DigitalOcean, AWS, Google Cloud, Linode, and Vultr.

Step 4: Pick Your Server Size

If you’re just building or testing themes, you don’t need anything too powerful. A 2GB or 4GB server is more than enough at this stage.

Step 5: Set a Server Location

• Choose a location that’s close to where your site’s users are.
• Click the “Launch Now” button. Give it approx 7 minutes, and your WordPress installation will be ready.

Once your server is deployed and WordPress is up and running, you can connect via FTP to access your theme files. From there, follow the same process we discussed earlier to start converting your classic theme into a hybrid one.

Challenges with Hybrid Themes (And Practical Workarounds)

1. The Template Structure Can Be Confusing

Hybrid themes often mix PHP templates with block-based files. That can make it harder for new team members to figure out where things are coming from.

What helps:

• Stick to a consistent folder structure.
• Leave clear comments in template files.
• Maintain a simple reference doc that explains what’s handled by PHP and what’s handled by blocks.

2. Plugin Compatibility Isn’t Always Smooth

Some WordPress plugins weren’t designed with hybrid or block themes in mind. That can lead to layout issues, or missing settings in the editor.

What to do:

• Test new plugins before rolling them out to client sites.
• When possible, choose tools that are actively maintained and FSE-aware.
• Keep a short list of “safe” plugins you know work well in hybrid environments.

3. Maintenance Can Get Messy Over Time

If different parts of a site rely on different systems—some with blocks, some without—things can get hard to track. Updates become riskier and slower.

How to manage it:

• Document which parts of the site use blocks vs. PHP.
• Name templates clearly (header-classic.php vs. header-block.html).
• Make regular passes through the theme to clean up unused files or patterns.

4. Clients May Expect Full Visual Editing

Just because a theme uses blocks doesn’t mean it supports the full site editor. Some clients get confused when they can’t edit headers or footers directly.

What helps:

• Set clear boundaries during handoff—explain what’s editable and what’s not.
• Provide reusable block patterns for common content sections.
• Limit customization options to keep things manageable and prevent broken layouts.

5. Documentation Is Often Incomplete

Resources on hybrid themes are still catching up. Most tutorials cover either classic themes or full-site editing—not the in-between state most agencies are actually using.

What developers do:

• Keep internal notes when you solve something unusual.
• Follow updates from WordPress Core to stay ahead of changes.
• Look at real-world examples of hybrid themes to see how others are structuring things.

Summary: Is a Hybrid Theme Right for Your Next WordPress Project?

So there you have it. This was our guide on WordPress hybrid themes. In this blog, we looked at what hybrid themes are, how they compare to classic and block themes, the key components that make up a hybrid theme, and the steps to convert a classic theme into one.

We also explored some of the common challenges developers run into when working with hybrid themes and practical ways to work around them.

If you’re looking for fast and reliable WordPress hosting, consider Cloudways. With SSD-based storage, built-in caching, an optimized server stack, and Cloudflare integration, it’s designed to help your sites perform consistently well, regardless of the project’s complexity.