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.
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.
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.
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.
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.
You will now see a small popup.
This popup works similarly to a mini-page or post editor, so it should look familiar.
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.
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.
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.’
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.
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.
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.
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.
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.
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.
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.
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.
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.’
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.
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.
Ryan Love says
You could also use Black Studio TinyMCE widget – http://wordpress.org/plugins/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.
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.
Admin
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.
Thanks!
Martin
Karen says
Awesome!!! You guys always give me the best info at right, just when I need it, time!! xx
Andor Nagy says
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.
Regards,
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.
Admin