Adding a Sidebar Image
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.
©2009 Michael L Nichols. All rights reserved.
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!
{ 4 comments… read them below or add one }
If you are typographically challenged, like me (fingers don’t fail me now), here is a shortcut so you don’t have to type or enter code. One of the main problems of typing in code is misspelling file names, upper vs lower case, directory levels, ect… er I mean etc.
Simply go through the exercise of adding an image to a new post or page using the Wordpress Upload Image function, (make it clickable if you want to).
Once you’ve done that, change your editor to HTML mode and copy the created code to the clipboard and then paste it into the text widget described above…
You can then delete the post or page because you were just using it as a notepad area for wordpress to create the correct and proper code.
Voila…
Hey, Bryan, that’s a good trick — thanks!
I keep files full of boilerplate code that I cut and paste all the time. Every time I do something new, it goes into the boilerplate file. So when I do it again, I go to the clippings to keep from typing a whole bunch of stuff — and making a whole bunch of errors!
Mike, I do the same, however I would hate to use separate files to do it!! Here’s a great program I use for storing code snippets — though it’s Mac only, so if you are a PC user, you’d have to find something similar. Coda for mac which I also use has a code snippet storage feature, however it’s not as easy to use as Code Collector.
http://www.mcubedsw.com/software/codecollectorpro
I’m reading your tutorials on contextual sub menus, great stuff!
I even made a tutorial video on how to do it. (only 3 minutes)
http://thesispress.com/create-a-clickable-image-in-the-sidebar