How to Create a Custom Widget Using a Text Widget

Create a Custom Widget :- that it is often easiest to simply use a plain text widget, and then create the content you want to place in that widget?  With plain text widgets you can use HTML/ CSS, Javascript, etc. to add design and functionality to an otherwise plain widget.  Or you can simply display plain text for say a biographical box.

To activate a text widget, go to Appearance > Widgets > and then select and drag a text widget to the widget area you want (sidebar, footer, etc.).  Open the widget, and enter the title.  In the main entry box, you can enter plain text information.  Note the checkbox towards the bottom entitled “Automatically add paragraphs”: if you check that box WordPress will properly add paragraph tags to the paragraph text you have typed in so the text will display properly.

As we have stated before, you can use the text widget for additional functionality for your WordPress website.  I have used the text widget to display an opt-in form – all you need to do is create the form in your autoresponder program, and then cut and paste the final HTML code into the widget, save and now you have your opt-in form displayed in the widget area you want.

Also Read :- Beginner Introduction to WordPress Child Themes

You can also use the text widget to display a button with some type of functionality for your WordPress website.  This is a 2 step process:

1.  You need to upload the button image to your WordPress site via your media library.  Once you have uploaded the file to WordPress, copy the file URL (at the bottom of the media file upload page).

Now you need to reference the image source in your text widget.  In the main text box type the following HTML:

<img src=”…paste file URL…” alt=”your alternate title for picture” />

2.  Now we can add a link to the image.  The new HTML code, or “a tag”, is added to the step 1 code, as highlighted:

<a href=”http:///www.yourwebsite.com”  title=”Your Title for the link”> <img src=”…paste file URL…” alt=”your alternate title for picture” /></a>

If you want to open the link in a new window, then add the highlighted code:

<a href=”http:///www.yourwebsite.com”  title=”Your Title for the link” target=”_blank”> <img src=”…paste file URL…” alt=”your alternate title for picture” /></a>

This may look familiar to you; it’s the same HTML code used to setup a clickable link image on a web site.

Another option for creating your own custom widgets is to install the HTML/JAVASCRIPT Adder plugin.  Installing this plugin creates a general HTML/JAVASCRIPT Adder widget you can use for just about anything.  This is a great plugin that I use a lot to post ads, optin forms, etc. Very simple to use – just cut and paste the code into the widget box, put in a title if you want, save, and there it is.  That is the power of WordPress!

Hope this helps, and keep learning.  Please let me know what you think, or if I missed something.  Always like to hear from you! 

Leave a Reply

Your email address will not be published. Required fields are marked *