Title: How to switch from a classic to a block theme Author: Sarah Snow Published: 1 June 2023 Last modified: 6 July 2024 --- # How to switch from a classic to a block theme Are you curious about the process of how to switch from a classic theme to a block theme? If so, this tutorial is for you! Watch to discover what you can expect when you switch from a classic to a block theme, learn the recommended steps to switch a site safely, and find additional resources to get you started in a block theme’s site editor. ## Learning outcomes 1. List the recommended steps to take when switching from a classic to a block theme 2. Predict what changes might occur on your website before switching themes 3. Change your theme from a classic to a block theme 4. Locate and utilize additional learning resources about block themes ## Comprehension questions 1. Why are people interested in switching from a classic to a block theme? 2. What is the first thing you should do before switching themes? 3. What stays the same when you switch a theme? What changes? 4. What’s the difference between a “Full Site Editing” theme and a “Site Editing” theme? 5. Will all plugins work with block themes? Why or why not? 6. Where can you find additional resources to help you learn how to modify and adapt your new block theme? ## Transcript Welcome to how to switch from a classic to a block theme. Before we begin, let’s start with the basics. What is a block theme? This is a type of WordPress theme built using blocks. You can edit all parts of a block theme in the site editor, which is a big change from the way classic themes worked in the customizer, where you could only use blocks on posts and pages. If you’re not sure which one you have, please see the learn.wordpress.org tutorial on what kind of WordPress theme do I have. By the end of this tutorial, you will be able to list the recommended steps to take to switch from a classic to block theme, predict what changes may occur on your website before switching, change your theme from a classic to a block theme, and locate and utilize additional learning resources to set up your block theme. Why are some people choosing to switch to block themes? Well, the reasons can be as simple as curiosity. Some of the more common ones are that block themes allow you to edit all parts of your website with no coding required. You would not need to know any CSS or PHP for example, to change where your logo appeared on your website. You can point, click and then move–no code required. Secondly, switching to a block theme provides website owners with the latest and greatest features to WordPress with every new release. For example, with the 6.2 release, I can now make a sticky header with a few clicks of a button. A classic theme would have needed code to accomplish the same task. Finally, block themes enhance loading performance, which keeps your website running quickly. Whether you are using a classic or a block theme when you switch from one WordPress theme to another, certain aspects of your website will be affected, while others will remain unchanged. What should you expect when you switch from a classic theme to a block theme? I’m going to switch from a classic theme to a block theme on my sample food blog to illustrate some of these changes. Here is what it looked like before when I was using a classic theme. Now I’ll switch. I’ll use the 2022 theme which is a block theme. The first thing to expect is layout and design changing the most noticeable change will be the visual appearance of your website. Each theme comes with a unique layout color scheme typography and design element that will replace the previous theme’s look and feel will also notice that CSS modifications and theme exclusive features disappear. Any custom CSS you’ve applied to the previous theme will go away. In my block theme, notice that my color choice and underline is gone. Additionally, some WordPress themes come with exclusive features like custom page templates, shortcodes, or widgets. Switching to a new theme may lose these features affecting the way content is displayed on your site. However, you will no longer need code for most of what you’d like to do in a new block theme. You will move from using the customizer to the site editor. Your new block theme will have a completely different set of editing options. Expect to configure the new theme according to your preferences. When you switch to a block theme, far more control is given to you the user to make changes to these same elements. Now what can you expect to stay the same? First your content stays: your posts pages, media files and comments will be unaffected. However, due to design differences, the way they are displayed might change. For example, in this classic theme, the featured image serves as a header with the title inside it and a sidebar is included by default. When I switch to a block theme, this featured image from the post will remain but where it the title and the recipe appear on this theme will be different. With a block theme, I will have much more control over how these features appear. I can do things like move my title so it appears under the featured image at a post date and board. Let’s look at what this looks like on the front end. Next, your user data will remain the same your users their roles and their profiles and what they can do will remain unchanged. Next, let’s talk about menus, plugins and widgets. You may need to create new menus but the existing pages and posts which you used before can still be linked to ask for plugins your installed plugins will stay and remain active but not all plugins work with blocked themes. So you definitely want to check this and test it. Plugins that don’t work well in block themes usually are any plugin that relies on a widget and doesn’t have a shortcode equivalent. Also, some plugins that work more behind the scenes such as SEO plugins may be an effect 10 former widgets needed to WordPress or that utilize a shortcode that you had on your former website still exist, but you may need to import them and style them in a block theme to an area that you’d like. Please see the tutorial importing widgets for more information. Overall, switching WordPress themes primarily affects the visual appearance and layout of your website. The core content stays intact, but you may need to take some time to reconfigure different elements and you’ll want to double check your plugins to ensure that they continue to function within your WordPress website. Now that you know what to expect, how is it recommended that you get started switching. Before switching from a classic to a block WordPress theme, it’s crucial to follow these steps to ensure a smooth transition. Step one, back up your website. Create a complete backup of your WordPress website including your database, media files and theme files. You can use plugins like WP Vivid Backups, Duplicator, All-In-One WordPress or another backup plugin to accomplish this. You will be migrating your website next, so do keep that in mind as you backup your site. Next, migrate your website to a staging environment. When switching from a block theme, it is strongly recommended that you test your new theme and a local or staging environment. Not all plugins work well with block themes, and it can sometimes take some time to set up your website exactly the way you’d like using powerful block themes. This will allow you to identify any issues make necessary changes and configure your new block theme without affecting your live website. Do note that it can take some time to migrate a theme from a live server to a test environment so allow ample time to do this. If you choose not to migrate to a test environment, consider installing and utilizing a maintenance mode plugin so that visitors to your site are not confused by the changes you will soon make to your live website. In my example, I’ve set up a second website at a new host because I use a few plugins that require an internet connection to work that I would like to test. Now I’m ready to switch to a block theme. My current host doesn’t provide the option to sort themes by block themes. So I’ve gone to wordpress.org selected themes and then blocked themes. From here I will choose a block theme and then upload and install it. When you’re looking for block themes, you might notice that the term Full Site Editing or FSE, for short is used. When block themes were first rolled out with the WordPress 5.9 release. Full Site Editing or FSE was the term that we used. However, the community moved to use the phrase site editing instead, which is replaced the FSC term. If a theme features Full Site Editing, it also means it’s a block theme identical to site editing. So to keep that in mind, I try out a few before settling on my favorite. Most of the time, you’ll notice that your customizer has been replaced by the button editor once you’ve installed and activated a blockchain of your choice. Do note that some plugins like I have installed still utilize the customizer, so both buttons may still exist. For example, I have the SEO plugin Yoast installed, which allows me to control some of its features through the customizer. Since these do not impact the front end of my website, this plugin still works. Before you get started working in your editor, it’s a good idea to check existing plugin compatibility. And sure the new block theme is compatible with your site’s existing plugins as well as the latest version of WordPress. Research and resolve any potential conflicts before making the switch on your live website. You can see a list of plugins that are likely to work well with your new block theme by going to wordpress.org, selecting plugins and searching for ones that work with blocks. New Plugins compatible with block themes are added and updated all the time. So if you’re not sure you can also head to your plugins support forum to ask for help for the best way forward. Once you’ve tested out pages, posts and other content affected by plugins, it’s time to stylize your website had to editor then click into your site editor. Then get styling by clicking on the styles icon. In this section, you can fully stylize the look and feel of your website without using any code. This is a very powerful dashboard and there’s a lot you can do. Edit your typography, choose your colors, maybe add some extra spaces or you even have the option to style individual blocks, all without using any code. For a more in depth look at how to use the section, please see the tutorial style your site with global styles. Were the tutorial how to use the WordPress style book with your block theme. Once you’ve styled your site’s colors, fonts and blocks, it’s time to start editing templates. I like to start by working on my homepage. In this case, I will edit this themes existing query loops to show different content. If you’re new to block themes, take some time to explore learn that wordpress dot orgs library of resources especially ones about templates, learn about templates, the site editor or even how to stylize a front page using a block fee. At this point, I’ve taken the time to stylize my templates and template parts, I’ve stylized some templates and use others the theme provides right out of the box. The choice is yours to style as much or as little as you’d care for. Once you’ve completed these steps, and are confident that your new theme is ready, you can proceed with the process of switching to your live site. You can do this by switching your domain to point to your new hosts. Use your migration or backup plugin to migrate your entire website from your staging environment to your live website, or work on your live website step by step the same way that you did in your staging website. After switching, be sure to retest your entire site thoroughly to ensure everything is functioning as expected. Now you should have total control over how your website looks and feels with your new block theme. If you’re new to block themes, please visit learn.wordpress.org. To find additional helpful resources, search for relevant video tutorials or take our site editing courses such as simple site design. You can find these courses under the Courses section under the heading using the site editor. Happy designing [Practice on a private demo site](https://playground.wordpress.net/?networking=yes) | Length | 12 minutes | | Language | English | | Subtitles | English | ## Suggestions Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/). ## License [CC BY-SA 4.0 ](http://creativecommons.org/licenses/by-sa/4.0/)