If you’re new to WordPress, you need to decide if you want to build your site using self-hosted WordPress or hosted on WordPress.com.
Next, you need to choose a theme which determines the look and feel of your site. WordPress themes are collections of files that specify the layout, spacing, typography, colours and interactivity of your site design.
You may have heard that there are two types of WordPress themes, classic themes vs block themes, and be wondering what differences there are between them.
In this post I’ll look at both types of theme, explain how they work and look at the pros and cons of each.
What is a classic theme?
A classic theme is a WordPress theme that is built the traditional way using PHP and HTML templates. Most classic themes were developed prior to the introduction of the block editor.
The first classic theme was called (appropriately enough) Classic. It was used as the standard WordPress theme up until version 1.2.
A typical classic theme structure is like this one for GeneratePress:
The theme contains mainly PHP files which build the pages, with CSS and Javascript files held in the /assets/ folder and theme classes and functions in the /inc/ folder.
Where can I find classic themes?
You can flnd classic themes on wordpress.com by selecting the Classic Theme feature.
There is no filter for classic themes on the wordpress.org theme directory, but you can assume that most of the over 12,000 themes there are classic themes.
Most premium theme vendors still sell predominantly classic themes.
What are some well-known classic themes?
Some popular and well-known classic themes are:
- Astra (1 million+ active installs)
- Hello Elementor (1 million+ active installs)
- GeneratePress (600,000+ active installs)
- OceanWP (600,000+ active installs)
- Twenty Twenty-One (400,000+ active installs)
- Kadence (300,000+ active installs)
- Neve (300,000+ active installs)
- Blocksy (200,000+ active installs)
- Storefront (100,000+ active installs)
- Sydney (100,000+ active installs)
These are all free themes from the WordPress.org theme directory. Some of them have premium upgrades in the form of plugins.
Some popular premium classic themes are:
This data comes from BuiltWith’s theme usage trends.
How do I customize a classic theme?
Starter sites and demo content
Some themes come with starter sites or demo content. This consists of layouts to create page content quickly, with you swapping out text and images for your own material.
Importing a starter site usually means importing media to your media library, and sometimes installing plugins as well.
Importing a site creates the pages required and loads all of the demo content. Neve also installs a few additional plugins.
For example, Neve has a selection of starter templates, 19 of which are free to use.
Here is the Wedding starter site homepage:
Neve’s starter sites use the block editor by default. You can also import sites created using the Elementor plugin but that’s a premium feature.
Blocksy has a number of starter sites to choose from. 30 of them are free.
Blocksy sites can be built with the block editor (Gutenberg) or Elementor or Brizy page builders.
A page builder, by the way, is a plugin to assist you to create and customize a website layout. Page builders were developed when the WordPress post editor was not sophisticated enough to create page layouts e.g. with multiple columns. That’s changed with the WordPress block editor, which is not yet quite on a par with most page builders, but is improving in capability.
Below is the services page for a dentist, which is one of Blocksy’s starter sites.
The Divi theme offers a selection of starter sites, 16 in all.
Another option is to generate a site using AI. Here is part of a site that I generated for a website about a digital agency:
In addition, you can create new pages and access hundreds of Layout Packs for different types of businesses and organizations.
Divi does not use the block editor – it uses its proprietary Divi Builder instead. This is built into the Divi theme but is available as a separate plugin to use with other themes.
The Customizer
Classic themes can be customized via the WordPress Customizer, found at Appearance > Customize. The options for the GeneratePress theme in the Customizer can be seen below. The options for other themes may vary.
Using the Customizer, you can edit things like:
- The site’s logo
- Site layout
- Navigation
- Colours
- Typography
- Widgets
Navigation
You can define a navigation menu and set it to display in a menu area defined in your theme (normally in the header or footer). You can do this in the Customizer or the Appearance > Menus section of your site. Menu items are all drag and drop to reorder them.
Alternatively menus can be added to widget areas, by adding a Navigation Menu block to a widget area.
Widgets
Traditionally, widgets were items of functionality that could only be used in widget areas – typically the header, footer and sidebar.
WordPress 5.8 brought in the block-based widgets editor. Widget areas are listed in order and you can add blocks to them via the block inserter.
This is what it looks like in the Widgets editor (Appearance > Widgets) in GeneratePress:
And this is what it looks like in the Customizer (Appearance > Customizer > Widgets > Right Sidebar):
Personally, I find the Widgets editor easier and more intuitive to use.
Header and footer
Many classic themes only allow limited customization of the header and footer.
For example, in Twenty Twenty theme you can change the header background colour but your choice affects the footer also.
If you wanted to put an additional bar above the header you’d need to alter the theme code.
The OceanWP theme allows a lot more header and footer customization, including a top bar, but you’re limited to adding content and social links to it, though you can include shortcodes.
Style (CSS) changes
If you want to make style changes independent of those offered in the WordPress Customizer, you can do so in the Additional CSS section of the Customizer.
Code changes
To edit a classic theme’s code, you can use the editor in WordPress, available at Appearance > Theme File Editor. Editing the PHP theme files is usually the only way that you can change the content on certain theme templates e.g. the search results page. This is not recommended if you are unfamiliar with code as you can break your site if you are not careful.
Changes to your theme’s code are saved to the filesystem on the web server. You should create a child theme rather than update your theme directly, as any changes you make will be lost on the next theme update. Note that there is no revision system for file changes, so make a backup first!
What is a block theme?
A block theme is built with HTML blocks. Block themes are a newer type of theme optimized for working with the block editor. The main advantage of block themes is full site editing: you can edit all parts of your site including the header and footer using blocks.
The first full site editing theme released by WordPress was Twenty Twenty-Two, which launched with WordPress 5.9:
Block theme file structure is different from classic themes. Here is the structure for the Extendable theme:
You can see far fewer PHP files in the main theme folder. Theme styling is handled mainly in the theme.json file as opposed to style.css. The /assets/ folder contains CSS, fonts and images. The /parts/ folder has template parts – header, footer, post meta and sidebar. The /patterns/ folder has PHP files representing block patterns and the /styles/ folder has style variations. Finally, the /templates/ folder contains HTML template files, which would typically be PHP files in a classic theme.
Where can I find block themes?
WordPress.com block themes can be found by filtering by the Full Site Editing feature.
The WordPress.org theme directory filters block themes as well – simply select Block Themes from the list.
What are some well-known block themes?
Block themes have been around for a lot less time than classic themes, so the numbers are mostly much lower than for classic themes.
- Twenty Twenty-Four (1 million+ active installs)
- Twenty Twenty-Three (700,000+ active installs)
- Twenty Twenty-Two (300,000+ active installs)
- YITH Wonder (60,000+ active installs)
- Extendable (50,000+ active installs)
- Raft (10,000+ active installs)
- Variations(10,000+ active installs)
- BizBoost (9,000+ active installs)
- Neve FSE (9,000+ active installs)
- Spectra One (7,000+ active installs)
- Jadro (6,000+ active installs)
- FotaWP (2,000+ active installs)
- Frost (2,000+ active installs)
- Minimalistix (2,000+ active installs)
- Ollie (2,000+ active installs)
- Ona (2,000+ active installs)
- Simple Nova (2,000+ active installs)
- Blockbooster (1,000+ active installs)
- Blockify (1,000+ active installs)
- Blockstarter (1,000+ active installs)
How do I customize a block theme?
Starter sites and demo content
Most block themes come with a selection of block patterns. These are collections of blocks that represent different sections of a page, or sometimes whole pages. More on patterns later.
Templates are full page editable layouts for the different types of pages on your site, e.g. single posts, blog page, 404 page and search results page.
Raft theme works with the Otter plugin which has a nice setup wizard for the theme that lets you choose a colour scheme and templates for your homepage, posts page and single posts. You can also add About, Contact, Portfolio and Services pages. Note that the navigation links created by Raft don’t point to any URL, so you’ll need to change them, or create or assign a menu.
YITH Wonder theme has a number of page patterns which you can use simply by adding a new page – the pages pop up for you to select from.
Twenty Twenty-Four also has page patterns (8) which you can use by adding a new page.
Variations theme has page patterns for About, Contact and Services pages, which you can access via the block inserter.
You can also select alternative layouts for the blog page. To do this, you should not assign your blog page as the posts page under Settings > Reading. Select the template Pages and then Swap template.
Choose the template you want to use from the selection e.g Blog (Alternative). Make sure you save your changes.
The Site Editor
Block themes use a very different system from classic themes. All customizations are done in the Site Editor, accessed by Appearance > Editor.
Navigation
Navigation is a bit different using the Block Editor. To edit the header navigation you can go to Appearance > Editor > Templates > Front Page. Select the header area and then click on a menu item. You can then edit the link.
To add a menu item, select the parent Navigation block and use the + button to add a new Page Link, Submenu, Page List or Custom Link.
To replace the menu entirely or create a new one, after selecting the parent Navigation block open the three-dot menu and select a menu to use or scroll down to create a new menu.
Styles
Opening the Styles section shows style variations – combinations of colours and typography designed to give your site a different look with one click.
You can also edit these styles to change colours, typography, shadows or spacing.
Styles are saved to the database using the revisions system built into WordPress. You can see these and select an earlier version in the Revisions panel opened with the clock icon. To reset all styles, click on the three dot menu and select Reset styles. You’ll revert to the default style variation for the theme.
Additional CSS is where you can add extra CSS style rules to your site.
For full documentation on styles, see the Styles overview.
Templates
The Templates section is where your templates live. These are the full page layouts that control how posts, pages, archives and other web pages look on your site. Because templates are built with HTML, they can be edited using the Site Editor.
The YITH Wonder theme has more templates than usual because it supports WooCommerce.
You should be careful editing templates which are used in several locations. For example, the Pages template applies to all pages unless you have chosen a custom template.
You can add additional templates, but you can’t delete templates that come with the theme; you can only delete ones you’ve made.
Template changes are saved in the WordPress database as custom post types of the type wp_template.
At the time of writing, there is no revision system for template editing though there is in the Gutenberg plugin. We can assume that revisions are coming to core in a future release of WordPress.
You can reset a template you’ve edited back to its original state by using the Reset option hidden in the three-dot menu on the template’s edit page or the Templates page.
Template parts
Template parts are bits of a layout that can be reused across different web pages. Template parts are typically the header, footer and sometimes sidebar.
You’ll find them in the Patterns section of the editor.
Editing template parts
Extendable theme comes with a selection of header and footer template parts.
To edit the footer, click on any template to edit it. Select the Footer area and then the Edit link.
To change the background colour, select the Group block, then the Styles tab of the Block (the half moon icon), then Background. Select a colour from the list. You’ll see I’ve also changed the colour of the Site Title and the Social Icons to show up against the background.
To add another social icon, select the Social Icons block and use the + button next to the icons to add another block. Browse for and select the block you want.
To add a link to the icon simply click on it to reveal the dialog box to enter the link.
To clear your customizations, select the footer template part and choose Reset from the three-dot menu.
To change the footer entirely you should be able to edit a template, click on the footer and in the block settings there is a Design section with available footers for you to choose from. Clicking on one swaps out the default footer for the one you select.
Unfortunately, I couldn’t see the footer I wanted to use in that list. So here is a workaround.
Go to Appearance > Editor > Patterns > Footer, select the footer pattern you want to use and select Edit.
Select the Group block and choose Copy from the three-dot menu.
Edit the Footer template part.
Select the Group and choose Add after from the three-dot menu.
Use CTRL+V to paste the footer pattern you copied.
Delete the original footer group (select then Shift+Alt+Z).
Save your changes.
Patterns
Where block themes come into their own is in the use of block patterns. These are collections of blocks that represent different sections of a page, or sometimes whole pages.
The Ollie theme has over 60 block patterns, which can be inserted into pages via the block inserter.
One advantage of using patterns is that they are translatable, unlike most classic theme demo content. Here you can see some Twenty Twenty-Four block patterns in French.
What are the pros and cons of classic vs block themes?
Classic themes pros
Popularity, longevity and support
At the moment, classic themes lead the way in terms of active installs. The most popular block themes are all default themes included with new installs of WordPress.
As classic themes have been around longer than block themes, in general they have a larger user base and are more likely to have good documentation and support.
Aside from official support channels, the really popular classic themes have Facebook groups with thousands of members. For example:
- GeneratePress Community
- OceanWP Official Community
- Web Creator Community (by KadenceWP)
- Divi Theme Users
- Avada Users Group
Familiarity
Since classic themes were the only way of determining a site’s look for many years, they are more familiar for most seasoned WordPress users and developers. Using or creating a block theme means adjusting to a new paradigm.
Plugin compatibility
Classic themes are more likely to be compatible with popular plugins. Block themes are more of an unknown quantity.
Classic themes cons
Harder to customize for non-developers
Customizing a classic theme is reliant on using the WordPress Customizer, and if there’s something you want to do in your theme that isn’t an option there, you will need a code solution. While this may be as simple as adding a line of CSS, in some cases you may have to edit the theme’s PHP templates.
Harder to switch between themes
Because classic themes have different methods of customization, switching themes can be a more painful process, as you may have to recreate elements of your site in the new theme.
Block themes pros
More future proof
It seems certain that as the block editor develops, more features will be added to support block theme users. While classic themes are not going away any time soon, to make the most of WordPress in the future using a block theme is the way to go.
Can be built by designers
Because block themes are composed of blocks, you can create and edit a site visually. Knowledge of code is not necessary, although it does help.
Using the Create Block Theme plugin you can create a new blank theme to which you can add templates and patterns and customize its style.
Don’t need a page builder plugin
Block themes are designed so that you can edit all parts of your site using blocks. A page builder is not required. Page builders often create more code than necessary, so by not using one, your site will have improved performance.
Faster
Block themes typically use HTML files which load more quickly than the PHP files in classic themes. Block themes also only load styles for the blocks used on a page, rather than across all pages.
Developer and core committer Felix Arntz wrote about his experience changing from a classic theme to a block theme and the performance improvement it bought.
Also, developer Elliott Richmond converted a classic theme to a block theme and tested their load times. He found that the block theme loaded 4 seconds faster than the classic theme.
Better accessibility
Because block themes are tied to the block editor, accessibility improvements there impact block theme accessibility. Features like keyboard accessible dropdown menus, landmarks and a skip to content link are built in by default. For the best start for accessibility, you should look for the accessibility-ready tag when choosing a theme.
Read more about block theme accessibility.
Block themes cons
Greater learning curve
If you’re used to classic themes, learning block theme customization takes some getting used to.
When you’re using a block theme, you need to get the hang of the following features of the Site Editor:
- Styles: style variations, palettes, and editing typography, colours, shadows, layout and block styles
- Templates: when they are used, and how to add, swap, edit and reset them
- Template parts: how to swap them for alternative designs and how to edit and reset them
- Block patterns: how to insert, move and edit them
If you’re developing a block theme, you also need to understand:
- How to organize your files into
/assets/,/inc/,/parts/,/patterns/,/styles/and/templates/folders Theme.jsonsyntax for configuring and styling your theme- Adding custom functions in
functions.php - Creating style variations
- How to build templates, template parts and patterns
Lack of documentation
Because block themes are newer, they are less well documented.
The Variations theme has over 10,000 users, but I couldn’t find any documentation for it. The BizBoost documentation is just a single page.
Some themes that buck this trend are:
Inconsistency in user experience
I have found inconsistencies between block themes in editing template parts. The FotaWP theme doesn’t allow you to swap out a header for another – there are no Design choices in the block settings when you select the Header.
Instead, to swap header you need to Edit the header, add one of the Header block patterns with the block inserter, then delete the original header pattern. It’s more fiddly than it needs to be and I’d expect a more consistent process.
Custom blocks need coding knowledge
If you need a custom block for your site and can’t find a plugin that would fit the bill you will need to code it yourself, which requires JavaScript or PHP knowledge.
Classic Themes vs Block Themes: Which should I use?
That is the million dollar question and there’s no straightforward answer. Both types of theme have their pros and cons.
If you want full control over the design of your site, and you don’t mind the learning curve with the site editor, then a block theme is the better choice.
If you are more comfortable with the traditional way of theming in WordPress, and want a solid theme with a large user base and good support, then go with a popular classic theme.
Summing up
In this post I’ve compared classic themes and block themes. It seems obvious that the capabilities of block themes will improve over time, but classic themes are not going away anytime soon.
So far, the adoption of block themes has not been spectacular, but that’s slowly starting to change. Noted agency WebDevStudios has just announced the launch of their WDS BT block theme, which is developer-friendly and comes with built-in accessibility, code quality and security checks. Rockbase theme is a premium block theme that is used by entrepreneur Pat Flynn’s Smart Passive Income site, amongst others. Other adopters of block themes include Optin Monster and NASA.
Which type of theme are you a fan of and why? Let me know in the comments.
Leave a Reply