Hybrid WordPress themes offer the ultimate solution to the top challenge for WordPress freelancers and agencies: embracing modern theme development seamlessly.
They bridge the gap between traditional classic themes and modern block themes, easing the transition with flexibility and efficiency.
Because developers fear “getting stuck” during a build using only blocks. Which could result in a missed delivery deadline. And risk the project becoming unprofitable.
But going with a block themes first approach does not have to be a gamble.
A quick review: theme types
Let’s first define the three types of themes that modern WordPress supports:
- Classic theme: built with PHP templates, uses classic menus, the Customizer, and widgets.
- Block theme: built with block templates, only supports the Site Editor.
- Hybrid theme: can use PHP and block templates, can support classic features and the Site Editor.
The definition makes it sound like these are three distinct types of themes. But they have a lot in common, and the limits between them are fluent.
Debunking the block theme misconception
There’s this idea that switching from classic to block themes is like flipping a switch:
According to this misconception you are building classic themes. And then one day, you are building block themes.
That’s not how it works. The reality looks more like this:
What you do is you build classic themes. And then you keep changing development approaches step by step. Until at one point in the future, you build block themes.
Modern WordPress is still WordPress
You can take any WordPress install, and activate a classic theme. Everything will work as it has for years.
Now take that same install, and activate a block theme. Now you got all the new features and tools.
WordPress is still WordPress. Everything that worked before continues to work now. And will continue to work in the future.
But on top of these proven development approaches, you can slowly add new modern features.
Here are a few examples of the things you can do:
- Keep a tight control over the block editor to enforce a style guide
- Built out entire pages with blocks, while keeping PHP templates.
- Replace widget areas with block areas. Blocks offer the same control over the layout as widgets. But in opposition to widget areas, you can decide which blocks are allowed in which block area.
- Keep using PHP headers and footers, while building out content with blocks.
- Rely on classic menus, and even mix classic and block menus.
- Continue using the Customizer, even with block templates.
- Mix block templates and PHP templates, as they work together flawlessly.
You need to look at modern WordPress as a collection of new building tools that replace classic approaches bit by bit.
But what are these new tools? And how should you best use them?
Blocks for content, layout, and functionality
The first new tool that modern WordPress offers is of course blocks:
- Text & Media blocks: Paragraph, list, image, and heading blocks to create content.
- Design blocks: Groups, stacks, rows, and columns that allow you to build out layouts.
- Theme blocks: Title, content, categories, and post lists which offer all the template building capabilities that we know from classic themes.
But not all block types make sense to use right away. So the other, often overlooked, feature are the block inserter customizations. Meaning you can decide which blocks the user has access to, and in what context.
You can decide which blocks to allow:
- For specific user roles.
- For specific post types.
- For specific block areas, down to the level of individual Group blocks.
Another use case for controlling the allowed blocks is to prevent new blocks added in future WordPress versions from showing up.
Beyond the technical aspects, this requires a key change in mindset. Classic WordPress themes offer very few customization options out of the box. But modern WordPress block themes are completely customizable, and offer a rich set of features.
When building block themes or hybrid themes for clients, it’s crucial that you only give access to the blocks that make sense to be used. This is a key component in preventing clients from breaking their website.
Future-proof, performant styles using CSS and theme.json
For the longest time the only way to style WordPress themes was CSS. And for an equally long time the best approach was to put all the styles into a single stylesheet.
There were two main reasons for this:
- Splitting up styles is hard in WordPress. While you can enqueue specific stylesheets on specific pages, doing this in practice is an arduous task. It’s easier and faster to just load all styles in one place.
- Loading few big files was a performance best practice. In the past one key aspect to improve performance was to not load too many different files on one page. So the single stylesheet approach had the good side effect of being very performant as well.
But this has changed over the last few years. Specifically the recommendation is now this:
- Only load the styles needed for the display of the current page.
- Prefer several smaller stylesheets over one large stylesheet.
- Prefer inline styles over loading separate stylesheets.
The good news is that WordPress block themes follow all these best practices. And the key component is the Style Engine.
On every page load, the Style Engine does the following:
- It combines the block styles defined by the theme with any customizations done by the user.
- It finds out which block types are displayed on the page.
- It outputs only the styles for these blocks onto the page.
So if you’re seeing all these great screenshots that show WordPress block themes performing great with Google’s Core Web Vitals it’s because performance is a builtin feature.
But what about hybrid WordPress themes? You can benefit from performance improvements as well.
First what you should do is use the theme.json file to create block styles. These styles will then be translated into CSS by the Style Engine.
This is both the case for the frontend, but also the backend. So the block editor preview will look like the actual website without you having to do additional work.
Plus since WordPress takes care of generating the CSS from the theme.json file, these will be future-proof. So if you ever had to deal with CSS overriding blocks breaking on WordPress upgrades–that will no longer be the case.
If you’re unfamiliar with the theme.json file, I recommend you check out my free Theme.json Explained course.
The second best practice to adopt is to use block styles for CSS. Let’s say, for example, that you want to customize the Heading block. You would put your styles into a dedicated stylesheet and enqueue them using wp_enqueue_block_style().
This has two advantages:
- It will reduce the size of your main stylesheet, and keep per block type styles in their own place.
- If you decide to use the separate asset loading, these styles will only load on the frontend for the blocks present on the page.
So while a WordPress hybrid theme does not offer all the advantages of a block theme, it still is a lot better than what classic themes offer
Keeping only the right customization options
“The block editor offers too many customization options”–You can find this and similar phrases all over the web. It’s not entirely wrong, but mostly.
In reality the block editor offers a level of control that exceeds that of the Classic Editor by miles.
As we saw previously with blocks, you need to configure WordPress to fit with the requirements of your particular client project. That is of course the case for block themes, but it’s especially important for hybrid WordPress themes.
One key aspect of hybrid themes is that the website templates and layout can only be user-adaptable up to a point. And it’s up to the developer to make WordPress as permissive or restrictive as needed.
There’s no “wrong” way to build a theme
It’s fine to build hybrid themes. Themes that use the classic menu system. That fall back to PHP templates. With widget areas, and shortcodes.
It’s also okay to have certain pages be block-driven, and with others using hardcoded HTML & PHP.
I recommend going block themes first, because of two reasons:
- You need to understand WordPress as it is right now. If you ignore the changes, you’ll get left behind.
- You need to improve upon your current approaches. Building themes with blocks needs to be both a better experience for your clients, and faster for you.
And I know from experience that changing workflows takes time.