{"id":44776,"date":"2021-09-17T11:59:00","date_gmt":"2021-09-17T08:59:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=44776"},"modified":"2023-12-03T15:33:04","modified_gmt":"2023-12-03T13:33:04","slug":"wordpress-widget-editor","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/wordpress-widget-editor\/","title":{"rendered":"How to Use the New Block-Based WordPress Widget Editor"},"content":{"rendered":"\n

In WordPress 5.8 (released in July 2021), WordPress made a big change to the widget editor, switching it from the longstanding system to a new block-based widget approach.<\/p>\n\n\n\n

Where before you used a custom editor in the WordPress widget editor, you’ll now use blocks to control the content in your site’s widget areas – the same blocks<\/a> that you use when you create posts or pages.<\/p>\n\n\n\n

In this article, we\u2019ll introduce you to the new block-based widget editor and show you how it works. Then, we\u2019ll look at seven of the most useful widgets and show you how to use them to their fullest potential. Let\u2019s dive right in!<\/p>\n\n\n\n

How the block-based WordPress widget editor works<\/h2>\n\n\n\n

To start, let’s go over how you can access and use the widget editor.<\/p>\n\n\n\n\t\t

<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\t#WordPress changed the way #widgets work - see how and which widgets you need for your website \ud83d\udd27<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n\n\n\n

How to access the widget editor<\/h3>\n\n\n\n

You have two options to access the widget editor.<\/p>\n\n\n\n

First, you can go to Appearance \u2192 Widgets<\/em> to open the full widget editor interface:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Second, you can also access the widget editor from the WordPress Customizer<\/a> by going to Appearance \u2192 Customize \u2192 Widgets<\/em> instead:<\/p>\n\n\n

\n
\"How<\/figure><\/div>\n\n\n

Using the Customizer is nice because it lets you see a live preview of how your widgets will look on the frontend of your site. However, the downside is that you have less space for the actual editor.<\/p>\n\n\n\n

For that reason, you might want to go to Appearance \u2192 Widgets<\/em> for heavy-duty widget editing and then switch to the Customizer for your final touches.<\/p>\n\n\n

<\/div>\n\n\n\n

How to use the WordPress widget editor<\/h3>\n\n\n\n

Whether you’re working in the dedicated WordPress widget area or the WordPress Customizer, the basic process for editing your widgets will be the same.<\/p>\n\n\n\n

For our screenshots, however, we’re going to be using the dedicated WordPress widget area (Appearance \u2192 Widgets<\/em>).<\/p>\n\n\n\n

With the new block widget system, WordPress widgets now use the same block editor that you use to create posts and pages. If you’re not familiar with how it works, you can check out our guide to the WordPress block editor<\/a>.<\/p>\n\n\n\n

To add a new block\/widget, you can click the plus icon in the top-left corner or the plus icon inside the widget area that you’re editing:<\/p>\n\n\n

\n
\"How<\/figure><\/div>\n\n\n

In the next section, we’ll look at some of the most useful block widgets that you can add<\/em>.<\/p>\n\n\n\n

To add text, you can add a Paragraph or Heading block and just click and type.<\/p>\n\n\n\n

To edit a block widget’s full settings, you just need to click on it. Then, you can edit its settings in the sidebar<\/a> (just like the regular block editor<\/em>):<\/p>\n\n\n

\n
\"How<\/figure><\/div>\n\n\n

To move widgets between different widget areas, you can click on the “squiggle” icon and use the drop-down to choose which widget area to move it to:<\/p>\n\n\n

\n
\"How<\/figure><\/div>\n\n\n

If you want to edit a different widget area, just click on the arrow to expand it. For example, in the screenshot above, you could click on the Shop Sidebar<\/em> widget area to edit the blocks inside that widget area.<\/p>\n\n\n\n

Overall, everything in the new widget editor functions pretty much the same as the block editor, which is nice because it creates a consistent experience for editing your WordPress site and gives you access to more control over your widget areas.<\/p>\n\n\n

<\/div>\n\n\n\n

The most useful WordPress block widgets<\/h2>\n\n\n\n

Now that you know how to use the new block-based widget editor, let’s look at seven of the most useful WordPress block widgets. <\/p>\n\n\n\n

However, keep in mind that these aren’t your only options, and you may want to get familiar with other features, too.<\/p>\n\n\n\n

1. Archives<\/h3>\n\n\n\n

The Archives widget organizes your past posts by month and year: <\/p>\n\n\n

\n
\"An<\/figure><\/div>\n\n\n

This navigation aid can help your audience quickly access older content. If you’re looking for an easy way to organize all those new blog post ideas<\/a> for future users, this may be the best widget for the job. <\/p>\n\n\n\n

We highly recommend that you turn on the Display as dropdown <\/em>setting. This can help minimize the space that the Archive widget takes up without limiting its utility. You should especially consider doing this if you have an older site with lots of posts. <\/p>\n\n\n\n

Finally, you may want to consider activating the Show post counts <\/em>setting. If you haven’t stuck to a consistent posting schedule in the past, this can help direct users to your more productive months. <\/p>\n\n\n

<\/div>\n\n\n\n

2. Latest Comments<\/h3>\n\n\n\n

As the name suggests, this widget displays the most recent comments across your site. It’ll also show which post the comment relates to, so you don’t have to worry about losing any context: <\/p>\n\n\n

\n
\"A<\/figure><\/div>\n\n\n

We think the best part of the Latest Comments widget is how effectively it shows off an active site. You can drive this point home even more by activating the Display date<\/em> option.<\/p>\n\n\n\n

If users see that other people are interacting with your posts, they may be encouraged to do the same. Furthermore, those being featured may appreciate the recognition. This personalized feeling can be particularly strong if your audience uses unique profile pictures<\/a>.<\/p>\n\n\n\n

Despite all these potential positives, you should probably pay attention to the display settings for this widget. Too many comments can slow down even the fastest WordPress themes<\/a>. As such, we recommend that you limit the number of comments you display at once. <\/p>\n\n\n

<\/div>\n\n\n\n

3. Latest Posts<\/h3>\n\n\n\n

The Latest Posts block can help keep your audience in the loop no matter where they are on your site. That\u2019s because adding this widget will generate a list of your most recent content:<\/p>\n\n\n

\n
\"A<\/figure><\/div>\n\n\n

As such, it\u2019s a simple way to provide quick access to your most recent work. As a result, users won\u2019t have to go back to your homepage or main blog for new content \u2013 they can instead directly access the post that caught their attention<\/a>.<\/p>\n\n\n\n

Best of all, this widget is highly customizable. For example, you can choose to include details such as post excerpts or the author’s name. If your site relies heavily on visuals, you can also choose to display featured images<\/a>.<\/p>\n\n\n\n

If you only want to display some of your content, you can also filter out posts from specific categories and\/or authors.<\/p>\n\n\n

<\/div>\n\n\n\n

4. Social Icons<\/h3>\n\n\n\n

Providing your users with opportunities to connect with you on social media can help to expand your reach. That’s where the Social Icons widget<\/a> comes in: <\/p>\n\n\n

\n
\"An<\/figure><\/div>\n\n\n

This feature helps you present links to popular social media sites like Facebook. You can also add less common ones such as Amazon. If you’re involved in their affiliate program<\/a>, this can help you make more sales. <\/p>\n\n\n\n

If you’re comfortable with using the widget editor in a stylistic sense, you may also want to consider adjusting the icon color palettes. You probably don’t want to stray too far from the recognizable designs, but even a subtle change may help these icons better fit your site’s theme. <\/p>\n\n\n

<\/div>\n\n\n\n

5. Tag Cloud<\/h3>\n\n\n\n

Your WordPress site probably has some kind of tagging system in place. The Tag Cloud brings this feature front and center by displaying all of your tags in a group:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Moreover, each tag’s size is determined by the number of posts that use it. You can make this clearer by turning on the Show post counts<\/em> setting. By communicating this information visually, you can help your users intuitively explore the most popular topics on your blog.<\/p>\n\n\n\n

However, some sites have a clear tag system for search engine purposes<\/a>. This can result in a long list of tags that even the Tag Cloud won’t be able to organize. If this sounds like you, consider using this widget to display categories instead. You’ll get the same navigational benefits without creating a huge block of text. <\/p>\n\n\n

<\/div>\n\n\n\n

6. Navigation Menu<\/h3>\n\n\n\n

The Navigation Menu widget is another simple yet powerful block. This feature displays your chosen navigation menu<\/a> wherever you place it: <\/p>\n\n\n

\n
\"Knowing<\/figure><\/div>\n\n\n

Navigation is a critical part of your site’s UX<\/a>. You probably already display your primary navigation menu<\/a> in your header, but the Navigation Menu widget gives you the option to display a different menu in any widget area.<\/p>\n\n\n\n

For example, you could create a separate menu for your footer links and use this widget to automatically display those links in your footer.<\/p>\n\n\n

<\/div>\n\n\n\n

7. Search<\/h3>\n\n\n\n

The Search widget enables users to scour your site for content. It might seem simple, but knowing how to edit widgets even as straightforward as this one is important:<\/p>\n\n\n

\n
\"An<\/figure><\/div>\n\n\n

Similar to the Navigation Menu widget, we think the Search widget works best when it’s placed in a prominent place. This way, users can easily browse through your site and find answers to their queries. <\/p>\n\n\n\n

Nevertheless, the default 100% width may not work with your site’s design. Fortunately, you don’t need to abandon this function altogether. Instead, you can customize the exact percentage width under the Display Settings <\/em>options menu.<\/p>\n\n\n\n

After you’ve set up this widget, you may also want to consider adding an autocomplete search function<\/a>. This small change can add a touch of professionalism to almost any site. <\/p>\n\n\n

<\/div>\n\n\n\n

How to disable block widgets and use the older WordPress widgets<\/h2>\n\n\n\n

The new block-based widget editor gives you a lot more flexibility than the older WordPress widget system. However, if you’d prefer to keep using the older widget system, you do have options.<\/p>\n\n\n\n

Just like the Classic Editor<\/a> plugin lets you disable the block editor<\/a>, the official Classic Widgets plugin<\/a> lets you disable block-based widgets and continue using the older widget editor.<\/p>\n\n\n\n

There are no settings to configure – as soon as you activate the plugin, your site will go back to using the legacy widget system.<\/p>\n\n\n

Go to top<\/a><\/div>\n\n\n\n

Get started with the WordPress widget editor<\/h2>\n\n\n\n
\n
\n

Running a website usually takes a fair amount of strategy. As such, it might not be enough to only know how to use the widget editor \u2013 understanding how to do so effectively is important, too. Fortunately, you can leverage the most useful features to their fullest potential with just a few clicks. <\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tSee what the new #WordPress widgets editor can do (plus the widgets every #website needs) \ud83d\udd27<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

In this article, we showed you how the new block-based widget editor works and then we took you through seven of the most practical widgets. We explained their basic use and covered a few clever ways to optimize their contribution to your website.<\/p>\n\n\n\n

If you want to be able to use your widgets in more parts of your site, you can also check out our guide on how to create a custom WordPress sidebar<\/a>.<\/p>\n\n\n\n

Do you have any questions about how to edit widgets more effectively? Let us know in the comments section below! <\/em><\/strong><\/p>\n\n\n