Switching to a block theme in WordPress offers a modern, user-friendly approach to website design. In this guide, you’ll learn why block themes are beneficial and what steps to take to ensure a smooth switch from a classic theme.
In this guide
Block themes, launched in WordPress 5.9, offer a significant upgrade to the classic theme experience. Block themes eliminate the need for custom coding, hiring developers, or searching for new themes to meet your design preferences. Block themes simplify the process, making design changes accessible to all in the WordPress Editor.
Before changing from a classic theme to a block theme, understand what changes will occur. Your website’s style and layout will change, but the content of your pages and posts will not.
We have a few tools available to you for testing your new theme before you change your live site:
- Preview and Customize: preview a theme and make customizations before activating the theme on your site.
- Create a Staging Site: qualifying hosting plans include the ability to create an exact replica of your live site.
Your editing workflow will change, so take some time to learn how you will edit your theme and content before you switch to a block theme on your live site.
When making changes to a classic theme, you would have used the Customizer. The Customizer has a pre-set collection of customizations based on the theme you’ve chosen. With block themes, design happens in the much more flexible Site Editor. The Site Editor provides complete control over how the theme will show your content and is theme agnostic.
Additionally, in classic themes, you edited your content using the Classic Editor. The Classic Editor was a simple text field where you entered your page/post content. Block themes use the WordPress Editor, which means you can add all kinds of content and layout elements to a page or post. There is still the Classic block for those who prefer the classic writing interface.
Before you switch to a new theme, you may want to set your site’s visibility to private or coming soon so you have time to review the new design and make any necessary changes before your visitors see it. Learn how to change your site’s privacy settings.
Lastly, make a note of the name of your current theme and whether or not the theme is retired. If your current theme is not retired, you can switch back to the classic theme if you need more time to switch to a block theme. Retired themes can stay active on your site, but it’s not possible to switch back to a retired theme if you switch to a different theme.
If your site’s hosting plan includes site backups, you will be able to restore a backup of your site to the point before you changed your theme.
Now that you’ve tested your site with a block theme, it’s time to change the theme on your live site:
- Visit your site’s dashboard.
- Navigate to Appearance → Themes.
- Search for your chosen theme.
- Click the theme’s thumbnail and click the “Activate” button.
If you want to preview the theme and make some customizations before you activate it, use the “Preview & Customize” button. Once you’re satisfied with the theme customizations, you can activate the theme.
If you tested your theme using a Staging Site, you can move those changes to your live site by synchronizing staging to production.
After switching to a block theme, the following steps will help ensure a smooth transition and fully utilize the features of your new theme.
When you switch to a block theme, how you edit your home page will change. Here are some key changes to be aware of:
- You will use the Site Editor to design your home page content.
- If your classic theme used a static home page, the page will be moved to the “drafts” section of Pages in your site’s dashboard. You can copy the content you need from the draft to the new homepage template in the Site Editor.
- If your classic theme displayed your latest posts on your home page, you can add a Query Loop block to your homepage template or create a separate page for blog posts.
While the existing menus should automatically move over to the new theme, you may want to customize your menu’s design and layout. Now is a good time to become familiar with how you will customize your site’s menu when using a block theme.
You will no longer need to use the “Customizer” or separate “Menus” section in Appearance to edit your site’s menus. Instead, you will edit your navigation through the Site Editor.
Block themes use fully customizable templates for different page types (home page, pages, posts, etc.). You have full control over where elements in the template appear and the padding and margins around each element.
- Learn more about editing templates.
- Learn how to customize your theme’s styles, including fonts and colors.
- Learn how to adjust the space between blocks.
- Browse all guides on editing your theme and templates in the Site Editor.
Test your website on multiple devices and browsers to ensure everything functions correctly, including:
- Widgets: If you use widgets on your site, verify that they have been converted to blocks to display your desired content.
- Plugins: If your site uses plugins, check to ensure the plugin still functions. Remove any plugins you no longer need.
- Classic content: Optionally, you can convert the classic content on your pages and posts to blocks. You only need to do so if you plan to edit the page or post in the future. New content will be created in the WordPress editor.
If you had temporarily set your site to private, remember to make it public again. This is also an excellent time to update your subscribers and social followers about the site’s redesign.
Since block themes no longer use the Customizer, here’s a handy list of where basic theme editing functionality exists in a block theme:
| Customizer | Site Editor |
|---|---|
| Site Identity (Title and Tagline) | Settings → General (Title and Tagline) |
| Colors & Backgrounds | Appearance → Editor → Styles |
| Fonts | Appearance → Editor → Styles |
| Header Image | Appearance → Editor → Templates |
| Menus | Appearance → Editor → Menus |
| Widgets | Appearance → Editor (Widgets have been replaced with blocks) |
| Homepage Settings | Settings → Reading |
| Additional CSS | Appearance → Editor → Styles |
