Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Use Visual Editor to Create Widgets in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Use Visual Editor to Create Widgets in WordPress

WordPress widgets make things easier for beginners. Previously, we showed you how you can make your own custom WordPress widget, and how to make text widgets colorful and fun. We also showed how to add widgets in post or page content. But a beginner level user who has never written HTML markup would probably be unable to add any images or links (very basic essentials) in a plain text widget. In this article, we will show you how to use visual editor to create widgets in WordPress.

WordPress comes with a text widget which can be used to add text and HTML. It comes with just a text box, and if you want to add images, links, or lists, then you will have to write the HTML code. The problem is that most beginners don’t know how to write HTML and CSS code. So the goal is to find a solution that allows users to create widgets in a WYSIWYG (what you see is what you get) visual editor.

First thing you need to do is install and activate the WYSIWYG Widgets plugin. Upon installation, the plugin adds a new menu item called Widget Blocks in your WordPress admin sidebar. Go to Widget Blocks » Add New to create a new widget block.

Creating a widget using visual editor in WordPress

Widget blocks are a custom post type, so when adding a new widget block you will be using the same visual editor you use to create posts and pages. You can take full advantage of the visual editor and add links, images, lists, or anything you want in the visual post editor. Once done, publish your widget block.

Now go to Appearance » Widgets and drag-drop WYSIWYG Widget to your sidebar. Under the Widget Block click to show drop down and select the Widget Block you created earlier. Save your changes and preview your website.

Drag and drop WYSIWYG widget into your sidebar

If you are developing a WordPres site for clients who don’t know any thing about HTML, or if you are a beginner yourself, then you can use this technique to create custom widgets in WordPress. We hope you found this article helpful. For feedback and questions, please leave a comment below.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Max says:

    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. Ryan Love says:

    You could also use Black Studio TinyMCE widget –

    It does the same thing but allows you to do it within the widgets area and means you don’t have to have another item in your sidebar.

  3. Hidayat Mundana says:

    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 ?

    • WPBeginner Support says:

      Most themes have columns defined for footer widgets like three or four after that new widgets are placed below. If this is not the case with your theme, then you may need to define a new widget area.

  4. Your Real Name says:

    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.


  5. Karen says:

    Awesome!!! You guys always give me the best info at right, just when I need it, time!! xx

  6. Andor Nagy says:

    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

    • WPBeginner Support says:

      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.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.