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 the WordPress visual editor to easily create widgets for your website?

The visual editor allows you to easily format text, add links, images, and lists without writing HTML code. This allows you to add rich text in your WordPress sidebar widgets.

In this article, we’ll show you how to use the visual editor to create widgets in WordPress. We will also show you how to create and save widget blocks and then reuse them with any theme and widget area.

How to use visual editor to create widgets in WordPress

Why Use Visual Editor to Create Widgets in WordPress?

Widgets offer an easy way to add non-content related items to your website. Like an about section, recent posts, email newsletter sign up form, ad banners, and more.

WordPress website builder comes with many default widgets that allow you to easily add those things. Your WordPress theme takes care of styling and it widget looks on your site.

WordPress widgets

However, sometimes you may want to add content that is not available as a default widget. For instance, you may want to upload author photo with some rich text using formatting and links.

In that case, you can use the Text widget, which comes with a built-in visual editor. This editor is a little different than the default block editor.

That being said, let’s take a look at how to use this visual editor to create widgets with rich text and media in WordPress.

Using Visual Editor in Default WordPress Text Widget

First, you’ll go to Appearance » Widgets and then drag the ‘Text’ widget into your sidebar.

Drag and drop text widget to WordPress sidebar

By using the standard text widget, you can add rich-text, images, and links, just like you would using other WYSIWYG editors.

Standard WordPress text widget

It has a button to add media and a toolbar with formatting buttons at the top. This gives you a nice area to add any type of rich content you want to display in your WordPress sidebar.

Once you are done editing, don’t forget to click on the ‘Save’ button to store your widget settings.

You can now visit your website to see your rich-text widget in action.

Standard widget on your site

The text widget is great for adding rich content. However, there are other ways to do the same thing with even more formatting and styling options.

Create Widgets with Widget Content Blocks Plugin

The default WordPress text widget has fewer formatting options. If you need more formatting options and flexibility, then you can try this method.

It allows you to create rich content blocks and then use them as widgets on your website.

First, you’ll need to install and activate the Widget Content Blocks plugin. Here’s our full guide on how to install a WordPress plugin.

Upon installation, the plugin adds a new menu item called Widget Blocks in your WordPress admin sidebar. Go to Widget Blocks » New Widget Block to create a new widget block.

Create widget block

Widget blocks are actually a WordPress custom post type. So, when you add a new widget block, you’re using the old WordPress visual editor, which is also called the classic editor.

You can take full advantage of the visual editor and add links, images, lists, or anything you want in the content. Once you’re done, go ahead and publish your widget block.

You can now add this content block to your sidebar.

Simply go to the Appearance » Widgets page and add the ‘Widget Blocks Widget’ to your sidebar.

Widget block

Under the widget block, click the drop-down to show and select the block you created earlier. Save your changes and preview your website.

Here’s what this new widget block would look like on your website in the main sidebar:

Widget content blocks

Another way you can use this widget is by creating multiple blocks to use in other widgetized areas on your site.

All top WordPress themes come with multiple widget areas in header, footer, sidebar, and more. You can use different blocks and create beautiful layouts.

To see all of your widget blocks, go to the Widget Blocks » All Widget Blocks page.

All widget blocks

Once you have your blocks made, you can drag each of them into any other widget-ready area of your theme. Here, we dragged them into the footer areas to create a custom footer.

In addition to adding the image widget we created earlier, we also added a list of links and a contact form.

Here’s what it looked like on our demo site:

Footer widgets

Taking WordPress Design Further (Pro Tip)

If you’re looking to create completely custom landing pages, then the best way to do that is by using SeedProd plugin.

It is a drag & drop page builder for WordPress that’s used by over 1 million websites.

You can use it to create completely custom page layouts without writing any code.

We hope this article helped you learn how to easily use visual editor in WordPress widgets. You may also want to see our guide on the best Gutenberg WordPress block plugins to add custom content elements, and our list of the must have WordPress plugins for all websites.

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.

    Thanks!
    Martin

  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

    Regards,
    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.

      Admin

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.