TBS Web Solutions

Ah, the Text Widget.  The plain jane tool that lets you stick anything in your WordPress sidebar.  The problem with sticking anything in there is that there are no rules enforced to help you create a proper link like the post editor has.  This can result in pictures that link to unexpected places, such as your FlickR or Photobucket account.

Here’s the post editor’s link builder:

First, we have the Link URL.  That’s where you want to go when the picture is clicked.  Let’s say we want to go to my homepage, TBS Web Solutions.  What this wizard does for you is create the HTML for the link, but it’s not that hard to create it yourself.

<a href="http://tbswebsolutions.com">TBS Web Solutions</a>

The above code creates a text link to my home page, but that’s not exactly what we want.  We want an image in there, right?  Browse to the page that has the image you are interested in.  This should be a file located on your site or an image hosting site that allows linking, such as FlickR or Photobucket.

Right click on the image and select properties.

Then select the address with your mouse, right click and select Copy.

OK, now we’re ready to build the Image code.  Here’s where we started: <a href=”http://tbswebsolutions.com”>TBS Web Solutions</a> and we want to replace TBS Web Solutions with the HTML that will display an image instead of text.  For that we need the image tag <img src=”" />.  What goes in between the “” quotes is the address I just copied.  In my case that’s “http://tbswebsolutions.com/images/logo.png”, so the image code would look like:

<img src="http://tbswebsolutions.com/images/logo.png" />

Then we need to place the image code in the middle of the link code.

<a href="http://tbswebsolutions.com/"><img src="http://tbswebsolutions.com/images/logo.png"></a>

I suggest creating the code in Notepad or your favorite text editor until you are comfortable with the process.  You can then copy the code and, back in your WordPress Text Widget, you can paste the code you just created.

Just to recap and in slightly different terminology:

<a href=”http://YourURL.com/”> This is the link you want to go to when the picture is clicked.
<img src=”http://YourURL.com/YourPictureAddress.jpg”> This is the location of the image file.
</a> This closes the link properly.

Not as easy as a wizard, but not that hard either.

This entry was posted on Wednesday, June 17th, 2009 at 4:56 pm and is filed under WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.