Using HTML to create seamless links
If you want to create an image link, whether it’s on your sidebar or elsewhere, the one fail-safe method to use is HTML code. HTML is read by your readers’ web browsers directly and doesn’t rely on a plugin to work. Depending on which theme you use, there may be other methods, but for even some of the most popular and useful WordPress themes (like Thesis) or those that are known for being easiest to use (like Genesis), the most foolproof method for creating links is to use HTML. Here are a few bits of code to get you started:
Create a Text Link using HTML
To create a text-only link (which just looks like words that are a link), use the following code:
<a href="http://XXX">YOUR TEXT HERE</a>
where XXX is the URL (location) you want to link to.
Create an Image Link using HTML
If you want to have your readers click on an image to take them to the next location, you’ll use an Image Link. There are two choices here:
Image Link with Image Size Already Set
When the image is already at the appropriate size for where you want to put it, use this code to create your link:
<a href="http://XXX"><img src="AAA" alt="BBB" /></a>
The variables are:
- XXX is the URL (location) you want to link to,
- AAA is the URL of the image you’re using, and
- BBB is the text (called “alt text”) that will appear when a reader places their mouse over the link.
Image Link with Specified Image Size
If the image you want to use is preset to a size that is too large or too small for the space you want it to go, you can use HTML code to change the size. But here’s a warning: depending on the browser your readers are using, the resizing may not always work! It is far better to resize the image before uploading it to your site.
<a href="http://XXX"><img src="AAA" alt="BBB" width="CCC" height="DDD" /></a>
In this example, there are a number of variables:
- XXX is the URL (location) you want to link to,
- AAA is the URL of the image you’re using,
- BBB is the text (called “alt text” that will appear when a reader places their mouse over the link
- CCC is the width (in number of pixels) you want the image to be, and
- DDD is the height (in number of pixels) you want the image to be.
Inserting a Link into your Sidebar
Wordpress makes inserting a link into your sidebar relatively easy. First, if you are using an image to create an image link, you’ll want to use the Media Library (Media > Add New) to upload your image. Be sure to write down the URL that WordPress assigns for this newly uploaded image (given at the bottom of the “Add New” dialog box).
To insert the link into your sidebar, go to Appearance > Widgets and open the sidebar in which you wish to place the text or image link. Create a widget (in the main box, labeled “Available Widgets”) by dragging a Text widget and dropping it into the open sidebar.
Note: WordPress has great drag-and-drop functionality, which means that once you create this text widget, it will be easy to reorder it to get it just where you want.
If you want a title above your link, enter this in the Title bar – but this is optional. Then, cut and paste the link code from above into the text box, substituting your URLs for image location and link location in the appropriate places. (Don’t forget to push the blue Save button!)
Finally, grab a glass of wine, check out your site and watch your link in action.
Let’s Connect!