How2: Add Buttons, Images, or Icons to your Sidebar in WordPress 2.7.1

Post by Guest Author, Joli K.

You can visit Joli’s blog here:

Sidebar buttons are an easy way to beef up your blog as well as a good way to endorse or promote a website that you like. For example, I run a blog called The Mama List and I wanted to add a link to The Soft Landing Baby because I think it’s a useful website that’s relevant to my content. Plus it looks better than just having a plain old link. Below are all the steps you’ll need to successfully create a new look for your sidebars.

Below is the logo I’d like to put in my sidebar, circled in red. I found this on The Soft Landing Baby website.

1. The first thing you would do is make sure it’s okay to copy their image and link to them (it’s normally just fine). To download the image right click and select “save as.” Save to desktop or desktop folder for easy access.

2. Next, you’re going to act as if you’re starting a new post. So choose “add new” from your Dashboard on the left of your admin page (click to enlarge image).

3. Click on the “add an image” icon and upload the desired image into post.

4. Click “select files“ and locate the image you’ll be using. If you want your image to link to a website, make sure you include the link url. I use “full size image” but you may have to play around with the size if you want it smaller. Also this is where you insert the title that you want people to see when they hover over the image. Once you have it filled out, click “insert into post.”

5. The HTML code will show up in your new post (to see the code, be sure to click on the HTML tab - not the Visual Tab). If you have linked to another site and you want a new tab to open when someone clicks on the image, make sure to insert: target=”_blank” at the end of the url.

6. Once you have the code in your new post you can preview to make sure the appearance is correct and it’s opening in a new tab. In order to preview you’ll need to “save draft” first.

7. If everything looks good and the size is correct, highlight and copy the HTML code.

8. Select “Widgets” under your Appearance tab on the left of your screen.

9. Under “Current Widgets” select right or left sidebar - wherever you want your image to appear - and then “Show.”

10. Scroll down to the bottom of the screen, find where it says “Text” and click “Add.”

11. Click on “edit” for the new Text button you just added.

12. Paste the HTML code into text box.

13. Save changes

14. Go to “edit” under your “Posts” Button and delete the draft that you created.

Simply follow the above steps each time you want to add a new button. You can see the finished product on my blog below. I currently have two buttons on the left and one on the right.