Adding a link and/or image to your WordPress sidebar

April 14, 2010

This is a more specific post than the earlier tutorial on the “mighty text box” which outlined what we could include in the Text box widget.

Adding just a link: Go to Appearance, Widgets and drag a fresh text box into your sidebar. Within that put your link (I usually copy and paste, to be sure it’s right). Now you need to “tell” WordPress that it is a link by placing some html code around the link; the code you need is <a href=”http://yourlinkaddress.com/”>Text for your link</a>

The a tells WordPress and the Internet that a link follows, and the href says where the link is, and you do need to be sure to “close” your link with the </a>

So, for a link to the Blogmistress free healthcheck the code would be:

<a href=”http://www.blogmistress.com/wordpress-healthcheck/”>Book your free WordPress healthcheck here</a>

Now if you want to use an image instead or as well as your link, you first need to have your image available online. You can either upload using the notes in the earlier post on using images within WordPress, or use FTP (for which I am not going to do a tutorial just now – if you know it you’ll know what to do). What you need is the image address/url (get in touch if you do want some help with this), and you use that instead of the link text – but with a little code so that the the web knows it’s an image – the <img says this, and then src=”http://www.whereimageis.com/image.jpg” tells it where, and then it’s a good thing to include some alt text, which will tell screen readers what the image is about alt=”short desc of your image”. So for the healthcheck button in our sidebar (at time of posting), the code is:

<a href=”http://www.blogmistress.com/wordpress-healthcheck/”><img src=”http://www.blogmistress.com/images/healthcheck.jpg

” alt=”wordpress healthcheck” /></a>

Of course you may want to link to an image that is already online, such as something within wikipedia – do be sure that you are allowed to use any images from elsewhere, and you simply use that image’s url instead of the one you uploaded.

And it is possible to add a link and/or image to your WordPress sidebar without using a widget, but that means rolling up our sleeves and coding into the theme’s files – we’ll cover that later.

Tagged with: sidebar

4 Responses to Adding a link and/or image to your WordPress sidebar

Wordpress Belarus » Blog Archive » Add an image and/or link to WordPress sidebar | WordPress Help and … says:

April 14, 2010 at 8:52 pm

[...] Read this article: Add an image and/or link to WordPress sidebar | WordPress Help and … [...]

ConfoundDead says:

August 1, 2010 at 10:01 pm

There's one problem i encountered while doing this. After pasting your links, for some reason, wordpress added a second quotation here
(after confounddead/):

<img src=”//confounddead.files.wordpress.com/2010/08/1280671443_twitter.png” alt=””Follow” />

With this the link too was broken. To fix it, for me, i had to get rid of the inner quotation mark.

Add an image and/or link to WordPress sidebar | WordPress Help and … | Wordpress Develop says:

January 15, 2011 at 2:14 am

[...] Go here to read the rest: Add an image and/or link to WordPress sidebar | WordPress Help and … [...]

Graciela Sholander says:

November 10, 2011 at 8:44 pm

I know this is an older post, but it’s exactly what I was looking for. Will give it a try right now … thanks so much!