Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Convert a WordPress Widget into a Block (Step by Step)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Are you looking to use a legacy widget in your WordPress sidebar or post content?

In version 5.8, WordPress added a new block-based widget editor, making it easier to add rich content to your site. Luckily, you can still use classic widgets on your site as well.

In this article, we will show you how to convert a WordPress widget to a block.

How to Convert a WordPress Widget to a Block

We will cover the following topics in this guide:

What Is the Difference Between a WordPress Widget and a Block?

A WordPress widget is a content element that you can add to widget-ready areas, which are sections that are not considered part of the main page or post content.

These typically include a sidebar, footer, header, and other sections that your WordPress theme considers widget-ready.

Example of the MonsterInsights popular posts widget in a sidebar

Technically, WordPress block works the same way. But how a block differs from a widget depends on whether you are using a classic or block WordPress theme.

If you use a classic WordPress theme, then WordPress blocks are content elements you add to the main page or post area.

On the other hand, block WordPress themes no longer have a separate widget editor. This means all of the content elements you add, regardless of whether it’s in the header, in the page itself, or wherever, are called WordPress blocks.

In version 5.8, WordPress introduced a new block-based widget editor. This makes adding visual widgets like social media feeds and social icons much easier.

Adding a shortcode widget to a WordPress sidebar

But what if you still rely on a legacy widget that has not been upgraded to a WordPress block? Luckily, you can still use it.

We will show you how to easily add legacy widgets to a widget-ready area and other parts of your page. The method you use depends on whether you are using a classic theme or a block theme.

But first, let’s take a brief look at the difference between widgets and blocks from a developer’s point of view.

Can a WordPress Widget Be Simply Converted to a Block?

If you are a developer who created a legacy widget for WordPress, then you may be wondering whether you can convert it into a new block widget.

While widgets and blocks look similar, they are actually quite different. For example, they are coded using completely different programming languages. Widgets are written in PHP, and blocks are written in JavaScript.

This means that there is no simple way to convert a widget into a block.

But that’s not a problem. Your existing widget will continue to work with new versions of WordPress. If you don’t plan to update your widget code, then you can leave it as it is.

However, if you want to continue adding new features to your widget, then it’s best to create a new block to replace the legacy widget. You can follow our guide on how to create a custom WordPress block.

Creating a new custom block

How to Add Widgets to Your Classic Theme’s Sidebar in WordPress

If you are using a classic theme, then you can add classic widgets to your sidebar or other widget-ready areas of your WordPress website by using the Legacy Widget.

Note: If you see Appearance » Edit instead of Appearance » Widgets, then you are using a block theme. You’ll need to follow the next method below.

First, you need to navigate to Appearance » Widgets in your WordPress admin area.

Next, you should click the ‘+ Add Block’ button. From the popup, you need to click the ‘Legacy Widget’ icon.

Add the Legacy Widget to Your Sidebar

Now, you can select the widget you wish to use from the dropdown menu.

Just click on it.

Select the Desired Widget from the Drop Down Menu

The widget will be added to your sidebar.

Make sure you click the ‘Update’ button at the top of the screen to save the new widget.

The Legacy Widget Is Added to the Sidebar

To learn more, see our step-by-step guide on how to add and use widgets in WordPress and how to add WordPress widgets in accessibility mode.

How to Add Widgets to Your Block Theme’s Sidebar in WordPress

Block themes, such as the default Twenty Twenty-Two theme, let you use the Full Site Editor in WordPress. Full Site Editing offers custom blocks for styling your website’s theme but doesn’t include the legacy widget by default.

That means you won’t be able to access legacy widgets from the Full Site Editor. Plus, when you switch from a classic theme to a block theme, any legacy widgets you were using are not migrated over.

Luckily, you can add legacy widget support using a plugin. Simply install and activate the X3P0 Legacy Widget plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Note: You will notice that the plugin hasn’t been tested with the latest WordPress versions. That said, we have tried the plugin, and it’s the only one that works best for this tutorial.

You can read our piece about using untested plugins to get more information. If you find a better plugin, don’t hesitate to let us know in the comments!

Upon activation, the plugin will add the Legacy Widget to the Full Site Editor. This will allow you to use legacy widgets with newer themes.

The Legacy Widget Is Now Available in the Full Site Editor

Once you are happy with adding the widget, you can click the ‘Save’ button to make the changes official.

How to Add Widgets to Your Post Content in WordPress

One of the great things about the WordPress block content editor is you can add widgets beyond widget-ready areas, like inside the post or page.

When you are in the content editor, go ahead and click the ‘+ Add Block’ button at the top of the screen.

Next, scroll down to the ‘Widgets’ section and find the widget that you want to add to the content. You can then drag the widget onto your post.

Scroll Down to the Widgets Section

You can customize the widget by using the Settings panel on the right of the screen.

Once you’re done, simply publish or update your blog post or page.

Configure the Widget From the Right Settings Pane

To learn more, see our guide on how to add WordPress widgets in post and page content.

Learn More Tricks to Use WordPress Blocks and Widgets

Now that you’re more familiar with widgets and blocks in WordPress, you may want to learn more ways to make the most of them. Here are some articles you can check out to get started:

We hope this tutorial helped you learn how to convert a WordPress widget into a block. You may also want to check out our guide on how to display different sidebars for each post and page in WordPress and the best Gutenberg-friendly WordPress themes.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 CommentLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.