Adding blinkies and links to your WordPress sidebar

One of the things we love to do with our WordPress sidebars is add blinkies and links to show off the things we love. I’m going to show you how to do it here.

First, log into your WordPress admin panel. You will see this

wordpress widget tut 1

Click on the Appearance tab in the sidebar and it will open to show you a few options. You need to click on Widgets.

wordpress widget tut 2

Here’s what you see:

wordpress widget tut 3

Some themes have only one sidebar, some have two, a few even have more than that, but we’re going to assume you have two. From the dropdown box under “Current Widgets” choose the sidebar in which you want to add your blinkies and/or links. Then locate the “Text” widget under the list of Available Widgets and click the “Add” link. It will move to your list of Current Widgets (but it won’t disappear from the Available Widgets list because you can add an unlimited number of Text widgets). Click the “Edit” link on your Text widget and it will open up to show a box where you can add your code:

wordpress widget tut 4

Now, this may sound a bit scary, but you’re actually going to write some code here. This code is used to display my little postage stamp graphic in the sidebar of The Blog Shoppe, just like this:

The code is:

<a href="http://www.theblogshoppe.com"><img src="http://kathymoore.daynote.com/blog/images/sidetag.jpg" alt="" /></a>

Let’s look at that line of code so you can understand what you did. First, the opening tag for the link:

<a href="http://www.theblogshoppe.com"></a>

That just tells the browser you are giving it a link. The part between the quotation marks is the entire URL that you wish to link to. This will be the same for both image links and text links.

Next, we give it the code for the image we wish to display:

<a href="http://www.theblogshoppe.com"><img src="http://kathymoore.daynote.com/blog/images/sidetag.jpg" alt="" /></a>

This tells it the location of the image we wish to display. If you are unsure of the location, simply right-click on the image and click “copy image location”, then come back and paste it into the section between the quotation marks. If you wish to use text instead of an image, simply type in the text. It doesn’t need to be enclosed in anything at all, just type your text after the opening link tag, so it will look like this:

<a href="http://www.theblogshoppe.com">The Blog Shoppe</a>

That will give you this:

The Blog Shoppe

Lastly, you have to tell the browser you’re finished with the link. You do that with your closing tag:

If you want to add more than one image or link, you can put them on separate lines by adding


<br />

after each one.

Now, you’re almost finished with your links. Click the “Done” button and your widget window will close, taking you back to the list. If you’d like to rearrange your widgets, you can simply drag them up and down to put them in the order you wish to have them displayed. Now, you just need to save your changes by clicking the “Save Changes” button.

wordpress widget tut 5

So that’s it…not too difficult, was it? If you have any questions, just put them in the comments and I’ll be happy to answer them. Good luck and have fun!