Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Use Visual Editor to Create Widgets in WordPress

Do you want to use a visual editor to create widgets for your website?

With the right visual editor you can create custom widgets featuring links, images, text, and more. You can then add these widgets to different areas of your theme and display them across your WordPress website.

In this article, we’ll show you how to use a visual editor to create widgets in WordPress.

How to use visual editor to create widgets in WordPress

Why Use Visual Editor to Create Widgets in WordPress?

Widgets allow you to add rich content outside of the traditional page and post area. Every WordPress theme is different, but you can typically add widgets to areas like the footer, header, and sidebar.

Many websites use these areas to show an about section, display their most popular posts, add an email newsletter sign-up form, and more.

WordPress has an area where you can add blocks to any widget-ready area.

The built-in WordPress widget editor

Many WordPress plugins also add their own blocks.

For example, if you’re using Smash Balloon Twitter Feed then you can embed recent tweets in any widget-ready area using the plugin’s Twitter Feed block.

An example of a custom block provided by a WordPress plugin

However, sometimes you may want to create a custom widget that shows rich, multimedia content to your visitors. For example, you may want to upload your author photo and then use it to create an author bio widget, complete with links to your different social media profiles.

That being said, let’s see how you can use a visual editor to create custom widgets in WordPress. Simply use the links below to jump to the method that’s right for your theme.

Method 1. Using the Widgets Options Plugin (Works with All WordPress Themes)

The easiest way to create a custom widget is by using the Widget Options plugin. This plugin adds lots of extra settings to the standard WordPress visual widget editor, including the ability to show different widgets depending on the user’s role, hide WordPress widgets on mobile, and more.

It also adds a Text widget that you can customize with your own links, images, formatting, and more. This is perfect for creating a custom widget without having to write any code.

First, you need to install and activate the Widget Options plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to the Appearance » Widgets page in your WordPress dashboard.

The Widget Options settings screen

You’ll now see a list of all the widget-ready areas in your WordPress theme. The options you see may vary depending on your theme.

You’ll also see all the widgets you can add to your site. We’re going to use the Text widget for this tutorial. All you have to do is drag and drop it onto any widget-ready area.

How to use the visual editor to create widgets in WordPress

You will now see a small popup.

This popup works similarly to a mini-page or post editor, so it should look familiar.

Creating a custom widget using a visual editor

To start, you can type in a title, which will appear above the widget.

After that, you can type text directly into the small editor, add links and images, create lists, change the formatting, and more.

A custom WordPress widget

When you’re happy with how the widget is set up, click on the ‘Done’ link to store its settings.

Now if you visit your website, you’ll see the new rich-text widget live.

An example of a custom author bio widget, created using a free WordPress plugin

If you prefer, then you can build a custom widget visually using the WordPress Customizer.

Simply go to Appearance » Widgets but this time click on ‘Manage with Live Preview.’

Creating a custom widget using the WordPress visual editor

This will open the Customizer with the widget settings already selected.

You can now click on the area where you want to add the custom widget.

Create a custom widget using the WordPress Customizer

After that, click on ‘Add a Widget’ which opens a panel showing all the different widgets.

Simply find ‘Text’ and give it a click to add it to your website.

Adding a custom text widget to a WordPress blog

This opens a small editor where you can add text, links, media, and more.

As you make changes in the editor, the live preview will update automatically.

Adding a custom text widget to WordPress

When you’re happy with how the widget looks, click on the ‘Publish’ button to make it live on your WordPress blog or website.

If you can’t find the theme customizer in your WordPress dashboard, we have a detailed guide on fixing it if it’s missing.

Method 2. Using the Full-Site Editor (Works with Block-Enabled WordPress Themes)

If you’re using a block-enabled WordPress theme, then you can add blocks to any widget-ready area using the full-site editor. In this way, you can create custom widgets by arranging the standard WordPress blocks in a widget-ready area such as the sidebar.

With that in mind, you don’t need to install a separate WordPress plugin.

To get started, simply go to Themes » Editor.

Launching the WordPress full-site editor (FSE)

WordPress will show one of your templates by default, which is usually the homepage template.

If you want to add a custom widget to a different template, then click on the downwards-pointing arrow in the toolbar. You can then choose any template from the dropdown menu.

Choosing a block-enabled FSE template

If you don’t see the template you want to use, then click on ‘Browse all templates’ instead.

This takes you to a screen showing all the available templates. Here, just click on the template you want to use.

Choosing a full-site editor WordPress template

With that done, click on the blue ‘+’ icon and then find the first block you want to use in your custom widget.

You can use any combination of blocks you like, but if you plan to use an image and text then we recommend starting with the ‘Media & Text’ block.

This allows you to easily arrange an image next to some text in a nice layout. With that in mind, the Media & Text block is perfect for creating an author info box, as you can see in the following image.

The Media & Text WordPress block

After selecting the block you want to use, just drag and drop it onto a widget-ready area such as the sidebar and footer.

The full-site editor gives you access to the complete set of WordPress tools and settings. This means you can add a call to action button, text, links, images, and other content to a wider range of blocks.

Creating a custom widget using the full-site editor (FSE)

With that being said, you should be able to create exactly the widget you had in mind. Simply add more blocks and content to the widget-ready area until you’re happy with how it looks.

For more ideas on how to use your theme’s widget-ready areas, please see our checklist of things to add to the footer on your WordPress site.

When you’re happy with the changes you’ve made, click on ‘Save.’

Publishing custom widgets in WordPress using FSE

Now, if you visit your website you’ll see the new custom widget live.

We hope this article helped you learn how to easily use the visual editor for WordPress widgets. You may also want to see our guide on the best drag-and-drop page builders and how to create a landing page with WordPress.

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.

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

8 CommentsLeave a Reply

  1. Thanks for this.

    This is particularly useful for certain premium theme developers like StudioPress. The entire theme home page is built on Widgets. So this technique would work really well.

  2. How can so I can add footer widgets in the other just below the footer ( footer widget should Fullwidth )
    Is there a plugin that can be used ?

  3. Andor and WPBeginner, thanks so much for these tips. I’ve often seen widgets that looked great and figured that I’d have to know how to code to do something similar. With these tips (don’t know whether I’l use the plugin or Andor’s tip) I now know how to create some nice widgets without coding.


  4. Hi,
    Nice tutorial, but there’s a much easier way to do this. You simply make the look in the post editor, then you choose the text tab instead of the visual, and copy the html code into a text widget. And it requires no plugin. :P

    Andor Nagy

    • Yes Andor you are right this would work. But it is basically for users who are developing for clients. Now if you told the clients that you can use visual editor in posts it would confuse them. This plugin provides a user interface with different labeling to do exactly what you suggested above.


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.