Importing widget areas from a classic theme to a block theme

The 6.2 WordPress release brought an exciting new feature that allows you to import widget areas from a classic theme into a block theme with a few clicks of a button. Find out how in this tutorial!

Learning outcomes

1. Migrate theme widgets from a classic to a block theme

Comprehension questions

1. Before you change your theme from a classic to a block theme, what should you always do first?
2. True or false: Importing your widgets saves you time, allowing you to focus exclusively on design rather than content.
3. When you add the template part block, which button should you select? Choose, start blank, or neither of these?
4. Is it possible to import more than one widget area?

Resource

Building Sidebars With the Site Editor

Transcript

Welcome to Importing Widget Areas From a Classic Theme to a Block Theme. Are you in the process of migrating an existing WordPress website from a classic theme to a block theme? Are you not sure how to migrate your widgets from your classic themes customizer to a new area in a block theme of your choice? If so, you’ve come to the right place. At the end of this tutorial, you will be able to migrate your classic theme’s widgets to your new block theme. Let’s find out how.

If you’re just getting started changing themes, here’s a quick reminder before you begin making any changes to your website: please make sure to make a backup of your website first, using a backup plugin such as Jetpack, WP Vivid Backups, All In One WordPress or another backup plugin of your choice. This will ensure that you will be able to quickly revert any unexpected changes.

First, let’s take a look at the sample website that uses a classic theme. The sample website has widgets in its sidebar like you can see pictured here, and it also has widgets in its footer. Let’s scroll down.

I don’t want to have to re-add each of these widgets when I switch my theme, so I will use the new 6.2 Widget Importer tool to help me that way I can focus exclusively on the layout of my new block theme, which saves me time. First, I will change my theme from a classic theme to a block theme of my choice. I then head to Appearance>Editor to see the changes to my theme. From here, I will click on the template to the right to start making changes. I’ll take a few moments now to stylize this theme to look the way that I’d like.

Once my theme starts looking the way I’d like, it’s time to import my widgets. I’m going to start with my footer. I scroll down to view the footer. Since I will be replacing it with a new widget area, I will start by removing it entirely. Using your list view, select your footer template part and delete it by selecting the three dots and remove footer. I use my list view again to click the three dots next to my last block. Then, select “Insert After” to be able to add this new section after my last block. Next, use your inserter and search for template parts. When this section populates, choose to add a new template part block, and then ignore both options that appear on your screen. You’re going to want to select the block itself. I know it’s selected because it is highlighted in my inserter. Now open Settings and expand the Advanced section. Under “Import Widget Area”, select the widget section you’d like to import. In this case, it’s widgets from my widget area number one, then click Import. When you look at your list view now you will see that a new template part has been created, and it’s been added to your website.

Now you can customize this new template part further as you’d like. Notice that all my links and information have been transferred. So I don’t have to recreate this from scratch, block by block. And of course, don’t forget to save.

Depending on your former classic theme, you may have multiple widget areas to import. For example, my last theme also had a sidebar area. I’m going to choose to add this as a sidebar. Please see the tutorial on creating a sidebar to create one on a theme that does not have one already, and use the same process. I would like my sidebar widgets to only appear on post pages, which is why I changed my theme. To do this, I navigate to templates “Single”, which is the default template for displaying any single post or attachment. Now some themes include this template by default, such as the Twenty Twenty-Three theme, but not all. So do keep that in mind. From the templates dashboard, I select the template I want to add this widget area to, select the pencil icon, and repeat the process from before. Now you might have noticed I’ve already set up my sidebar area so I don’t need to delete anything this time. I use the plus sign in the Columns Block, search for template parts, and use my settings to select act Advanced. Now, I will import my sidebar widget area.

This allows me to focus on styling these blocks to look the way I would like rather than re-adding content one block at a time.

This is what my site looks like now if someone visits it: you can see my footer here. And if I click on a post, you’ll see the sidebar widgets.

To edit these template parts, head to your editor, select the template parts section, find the template part you added, and click on it. Then click the pencil icon. From here, you will be able to edit how this template will look at content the same way you do with your headers and footers. Happy editing. For more tutorials, live workshops and courses please visit learn.wordpress.org. See you!