How To Easily Create Custom Widgets Without Using HTML
Have you ever wanted to put an image in your WordPress Blog widget section and realized that it is not as simple as you would have hoped? If not, than this post is not for you. If you have then you might want to know how to easily create custom widgets without having to use HTML.
I will show you how to create custom widgets the easy way, and the easier way.
I built a site for a Real Estate Client last week and she wanted to customize her widget section on a specific page, to add her image, title, name, phone number, email address, and social links. No problem. Just upload your image to the media library, add the image tag to a “Text” widget, add your content, hyperlink your email address and social links. Simple. But it was not simple for you her.
Ok so how do we easily create custom widgets? In both cases we will use the WYSIWYG Visual Editor
Create Custom Widgets The Easy Way
- “Add New Post” like we were going to post a new blog post, making sure you are in the “Visual Editor”.
- Add an image, text, links, bulleted lists, etc
- Once you have entered the content you want in your custom widget… click the “Text” tab.
- By clicking the “Text” tab the WYSIWYG editor is going to take your content and turn it into HTML Code.
- Copy the HTML Code from the Editor, and go to the “Widgets” section of your site and past the code into a “Text” widget box.
The Code I Created For The Sample Profile Style Custom Widget
<img class=”wp-image-7361 alignleft” style=”margin-left: 20px; margin-right: 20px;” alt=”jason_fox_profile_pic” src=”https://www.jasonfox.me/wp-content/uploads/2013/10/jason_fox_profile_pic.jpg” width=”143″ height=”143″ />
<em>Internet Marketing Specialist</em>
<a href=”mailto:jasonfox.me” target=”_blank”>Email Me</a>
<a title=”jasonfox” href=”https://www.jasonfox.me”>www.JasonFox.me</a>
- Save the “Text” widget you just created and double check the result for accuracy.
Create Custom Widgets The Easier Way
While this method is a bit easier is does require uploading a plugin.
Keep in mind that you want to use as few plugins as possible on your WordPress Website, so before you use this plugin decide if the advantage that you gain is worth using an additional plugin.
First thing you will need to do is upload the WYSIWYG Widgets plugin.
- You can download it from the link above and upload the .zip file into your plugin section
- Or you can “Add New” plugin and search the repository for WYSIWYG Widgets and install
Once the plugin is installed it will create a new menu item called Widget blocks. You can click “Add New” to start your new custom widget.
Like the example above you can add images, text, links, contact information, bulleted lists, etc.
What is different from above is:
You need to give your widget a Title (A Cool New Widget – In the example)
And you need to “Publish” the Widget Block.
Once you have created and published your “Widget Block” go to the “Widget” section of your WordPress Website.
And activate the “Widget Block” Widget in your desired location.
No HTML Code is needed, making this the Easiest way to build a custom widget.