Display Side Editor in Hybrid Theme

Place this in function.php or use Scripts Organizer Code Snippet.


We’ll let WordPress think it’s a block theme so the Editor shows up, but we’ll override template loading to use PHP templates like index.php.


In your functions.php, override the block template resolution like this:

add_filter( 'template_include', function( $template ) {
    // Only override front-end template loading, not admin/editor
    if ( ! is_admin() && ! is_customize_preview() ) {
        return get_template_directory() . '/index.php';
    }

    return $template;
}, 99 );

This forces WordPress to always use index.php for rendering the front-end — even though the theme is a block theme and has index.html.

You can also expand this logic for single.php, page.php, etc., as needed.


Outcome

FeatureResult
Site Editor in Admin✅ Visible and usable
Front-end rendering✅ Uses index.php (classic PHP)
theme.json styles✅ Still applied globally
Templates like index.html❌ Ignored

Using the WordPress Site Editor While Keeping  index.php  for Front-End Rendering

In hybrid WordPress themes, especially when experimenting with block-based features (theme.json, global styles, templates), developers often face a dilemma:

“I want to use the Site Editor to configure styles, but still have full control of front-end rendering using index.php instead of index.html.”

This is particularly useful when you’re building custom experiences, integrating dynamic PHP logic, or simply prefer the traditional WordPress template hierarchy.

What It Does

  • 🛠 Overrides WordPress’s template loading system when rendering pages on the front-end.
  • 🧠 It tells WordPress: “Forget the block-based index.html, just load the classic index.php.”
  • 🧭 Leaves the admin untouched, so the Site Editor remains accessible under “Appearance → Editor”.
  • 🎨 Still loads theme.json styles and settings — so typography, colors, spacing, and other controls continue to apply site-wide.

💡 Why It’s Useful

  • Lets you use block-based global styles (like Tailwind configs or theme.json) without relying on full block-based templates.
  • Keeps a familiar PHP-based front-end development flow while exploring the benefits of block themes.
  • Makes your theme more flexible and future-ready — you can toggle between classic and block-based rendering whenever you want.
Click to Copy