Easily Create Custom Widgets

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”.

How To Easily Create A Custom Widget

 

  • Add an image, text, links, bulleted lists, etcVisual Editor

 

  • Once you have entered the content you want in your custom widget… click the “Text” tab.

Build Your Custom Widget

 

  • By clicking the “Text” tab the WYSIWYG editor is going to take your content and turn it into HTML Code.

Custom Widget HTML

 

  • 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.

creating a Text Widget

 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″ />
<h2>Jason Fox</h2>
<em>Internet Marketing Specialist</em>
<strong>(425) 243-9560</strong>
<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.

Visual Editor 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.

WYSISYG Widget

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.

By |2013-10-29T14:20:04+00:00October 29th, 2013|

About the Author:

Jason Fox - Real Estate Marketing Business: We build WordPress Real Estate Websites with IDX Me: #GoHawks, #BringBackTheSonics, #MaybeNextYearMariners, #ILoveMyKids #SeattleSunLover #SeattleWaterLover #BFF Blog: Focuses on Wordpress Websites, Content Management, SEO Services, SEM Campaigns, Social Media Marketing, Email Marketing, Beautiful Design, IDX, and more.

We would love to hear from you...

Pin
Share
Tweet
+1
Share
0 Shares