Adding a Sidebar Image

by Mike Nichols

One of the things that most Thesis newbies want to know right away is how to put an image into a sidebar. It is an easy task that takes only a few minutes. Following is a step-by-step guide to putting both a non-clickable and a clickable image into a sidebar.

Make sure your image is the right size

Images that are too big will overflow the boundaries of the sidebar. Size your image to fit. The maximum width will be the width of the sidebar you defined in Design Options. It’s a good idea to make the width a little smaller. Images will be centered in the sidebar.

Set up a text widget

You will put your image into a text widget. Here’s how to get a text widget ready to accept your image code:

1. From your Admin page go to Appearance > Widgets.

2. Look for “Text” in the available widgets on the left, then drag it to your sidebar. Drag and drop the new text widget into the desired location.

3. Click the arrow to the right in the text widget bar to open it, if necessary.

4. Enter a title if you want.

Adding a non-clickable image to the widget

This is for when you only want a non-clickable image in the sidebar, like a cute picture of your dog.

1. Enter the following code into the large text area of the widget:

<img src="FULL-PATH-TO-IMAGE" align="middle" alt="DESCRIPTION-OF-IMAGE">

2. Change “FULL-PATH-TO-IMAGE” to the full URL of the image. A relative URL will not work. For example, to put the RSS icon in my sidebar into a text widget, I would type the following:

<img src="http://thesisthemetools.com/wp-content/themes/thesis/custom/images/rss-widget.jpg" align="middle" alt="RSS icon">

3. “DESCRIPTION-OF-IMAGE’ is a description of the image. It’s good SEO practice to provide a description.

4. Save the widget, then refresh your blog page to see your new widget.

Adding a clickable image to the widget

This is for when you want a clickable image in the sidebar. When the image is clicked, it takes the user to a URL of your choice. You would use this for RSS buttons or ads, for example.

1. Put the following code into the large text box:

<a href="CLICKABLE-LINK"><img src="FULL-PATH-TO-IMAGE" align="middle" alt="DESCRIPTION-OF-IMAGE"/></a>

2. “CLICKABLE-LINK” is the URL you want the user to be taken to when they click the image.

3. “FULL-PATH-TO-IMAGE” is the URL of the image. As discussed above, it requires the full path to the image, not a relative path.

4. “DESCRIPTION-OF-IMAGE’ is a description of the image. It’s good SEO practice to provide a description, and it helps you remember what the image is.

5. Save the widget, then refresh your blog page to see your new widget.

I hope this short tutorial has been helpful to you. As you see, working with code is not hard, and it’s mostly just cut-and-paste. As always, your comments are welcome. If you want to email me directly, click the “Contact” button in the button bar.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!