serpentcouncil.com

I want to add an image to my blog that will show up all the time so I thought it would be a good time to introduce the Text Widget.   The Text Widget basically allows you to enter any custom item you would like such as some basic text, an image, maybe even something like some Flash.

So go to Appearance > Widgets and select the “Add” link beside  Text  listed on the left hand side list of available Widgets.   

Now because I am adding a picture I have to do one of two options.   I have to either upload my image to my blog or I have to put it somewhere else on the Internet to be link to from my blog.

In this case I am going to add it to the blog.   To do this go to Media > Add New.  You should get a page like this:

Choose the “Select Files” button and browse for the image you want to upload.  You have some options available to change the name, add a caption and a description, so go ahead and do what you feel is appropriate and then select “Save All Changes.”  

Note that whenever you add a picture to a blog post using an external program such as Windows Live Writer, when you upload the post to your site, Windows Live Writer is adding all the images you use to your Media Library automatically.  So if you have been creating posts with images you should be able to browse these in your library. 

Now the easiest way to actually add this image to your Text Widget, is to use the built in post editor of WordPress, something we haven’t been using due to our preference for Windows Live Writer.   The reason we want to use the post editor here is to get the URL for the image we have uploaded to the media library and if you are not HTML proficient, you can quickly snag the code you need for the text widget itself. 

So go to Posts > Add New

It’s a little hard to see on the image above, but there are symbols beside the words Upload/Insert which represent various media objects.  The first one is the one we want which is image.

A popup box will magically appear and you will want to select “Media Library” from the choices along the top.  You will then be presented with a list of all the files in your media library.  I believe this list is sorted by date, so the newest ones should be at the top of the list.  Convenient, because that means ours should be right at the top.  Select the “Show” link beside the image you want to add and a number of options are available to you.  The defaults should be fine for you, but depending on your image and how wide your sidebar is on your theme you may need to adjust and tweak these settings.  If you are following along with me, the sidebar we are using is pretty liberal, and while I don’t have the exact dimensions available off the top of my head, my image is 300 pixels wide so if you are not any wider then that you will for sure be fine.  Click the “Insert Into Post” button and your image should be dropped into main window.  

Now you need to get the HTML code so along the right top corner of the editor you see two tabs, one for “Visual” and one for “HTML.”  I think you see where I am going with this don’t you?   Select the “HTML” tab and you should get some code instead of a picture in your editor:

You will want to copy and paste this code as I have highlighted because that is what you need for your Text Widget. 

Now go back to Appearance > Widgets.  You will get warned about navigating away from this page because you haven’t saved it but don’t worry about that as long as you have copied the HTML code.  To be safe, you may want to copy it to a text file while you do this so you don’t lose your work.   Once you are back in the Widgets section,  Select the “Edit” button on your Text Widget and paste in the HTML.

Once that is done you can click…Done!   Make sure to save your changes by clicking on the “Save Changes” button as well.

Now your site should look something like mine, with an image now in the sidebar.

That’s it!

I consider it a bit of a gap that the media library doesn’t display the URL or link to the images or items it includes.   If it did you wouldn’t need to create a dummy post, as long as you knew a little HTML, you could just grab the link from the library.