Basic HTML for the WordPress Text Widget or Learn a Shortcut Method

Need to add some text, a banner, a linked image or advertisement to your WordPress sidebar? Although there are many types of user friendly widgets that you can install via plugins to your WordPress installation, the plain ‘ole text widget can be all that most business owners need. Let’s learn the basics of how to use the widget and some basic html, so you can add images and links to your website.

widgets

Within your WordPress Dashboard, you can click on Appearance >> Widgets to control what shows up in your sidebar. The text widget – contrary to the name – is simply a widget that allows you to enter whatever html and text you want. This pretty much gives you free reign to add elements into your sidebar. This includes snippets of code that you might copy from other websites to make banners and badges show up.

textwidget1

All you have to do is drag a new text widget into your sidebar, wherever you want your content to appear. Then there are two ways to go about getting the code and content there. One is to learn the HTML basics.

This is the code snippet to create a link:

<a href=”http://www.URLThatYouWantToLinkTo.com” target=”_blank”>Your Link Text Here</a>

Of course you would replace the http with whatever you actual link is and change the text to whatever you want. Note that I have specified some coding that says target equals to blank, which basically makes the link open in a new window. Often, you are linking out of your website, so it’s good to open a new window.

To add an image here is the code snippet:

<img src=”http://www.URLOfTheImage.com” />

You can also add the width and height and other elements, but that is the bare minimum above.

Finally, if you wanted to link an image, you would combine the two code snippets, so that the link <a> tags wrap around the <img> code snippet:

<a href=”http://www.URLThatYouWantToLinkTo.com” target=”_blank”><img src=”http://www.URLOfTheImage.com” /> </a>

If you would like to learn more about HTML basics, check out W3Schools for tutorials.

The other way to get the code you want is to use the post editor in WordPress and then copy & paste.

The idea is basically pretend you are created a post and use the visual editor to get it to look the way you want. Then switch over to the “Text” editor by clicking the tab in the upper right corner of the post editor window.

edittext

You will see all the HTML code that WordPress has created for you, so you can just copy it and paste into a text widget. Instant success! Now that’s a shortcut for you.