How to add an image widget to your side bar!

WordPress DashboardNow I’m into the swing of the PostADay2011 Challenge and lovin’ the RandomBlog2011 Challenge I’ve noticed a few people having probs with adding images into their side bar widgetty area thingy. So I thought why not provide a handy step by step guide that old and new WordPress bloggers can follow.

This guide is nice and simple without being condescending, after all everyone has to start somewhere. The WordPress help files can be pretty decent but often they assume bloggers know certain things and don’t fully explain that all important section between A and B.

There are 11 Steps in this guide involved with adding a media file to your library (images), adding an Image widget to your sidebar and how to get that image to link to someplace you want.  This may seem like a long set of instructions but it’s easy to follow. Worry ye not, after you have read this your cup of confidence will be overflowing with…er, confidence!

Let’s get started!

Step 1.

When you have found an image you like, for example the PostADay2011 Challenge badge which you can find here, RIGHT CLICK the image and choose SAVE AS or SAVE IMAGE AS…

Step 2.

A window will open. Find a folder you wish to save the image to, My Documents or wherever you prefer. If you want you can open My Documents and check to see if you have saved it properly.

Step 3.

In your Dashboard look on the left hand side. You should see a menu called MEDIA. Depending on how you have your dashboard settings this may be closed or expanded. Click the MEDIA menu button and then Click ADD NEW.

Step 4.

The MEDIA LIBRARY page will open. At the top next to the page title click Add New.

Step 5.

A new page will open. If you already have images etc that you have placed in your posts these will be listed here. You need to click the SELECT FILES button.

Step 6.

A window will open similar to the one you saw when you saved the image in Step 1. Locate your image by browsing your files and click Open usually found bottom right of the window that is open – Windows Operating System. Don’t ask about Mac’s as I have no idea sorry!

You should see a bar that says: CRUNCHING. This means it’s uploading the image from your PC, it may also compress it to a smaller file size, not really sure about this but it’s not important. Then the page will change and you will see something similar to the picture below, though it will have your image in it and not the strange logo thingy I used!

Step 7.

There are 3 important things here to make a note of.

First. Where it says dimensions, jot them down somewhere. You will need those in a few steps.

Second. Where it says File URL. Put your cursor in that box, Right Click and choose Copy.

Finally: Click Save all changes. The page will return to the Media Library and you should see your uploaded and saved image at the top of the list.

Step 8.

Okay, you’re doing great! Let’s move on. Look on your menus to the left of the page. Again if you might have these expanded or collapsed. Find the menu called Appearance. Expand it if you need to by clicking the grey arrow to the right of it. Then click Widgets once the menu has dropped down.

Step 9.

On the Widgets page you will a main area with all the available widgets and on the right of the page you should see menus with a title at the top called Sidebar1. In the main section look for a widget called Image. Click the Image widget in the main section, hold it then drag it over to the Sidebar1 menu.

A box with a dotted edge should appear when you have it in place. Release the mouse button to drop it in to place. It doesn’t matter where for the moment so long as it drops neatly into that Sidebar1 menu.

Step 10.

You’re nearly done! Just a few more steps to go!

The Image widget you just dragged across to Sidebar1 will open up. This is where you can fill in the details for that image.

Few things to do here.

Widget title: Don’t add anything here as this will just place a title above your widget and it’s not normally important to do so if your image is self-explanatory.

Image URL: Remember in Step 7 when I said to right click and copy that Image URL after you uploaded your image? Now right click in the box under Image URL in the widget box and click Paste. This will put the location of your uploaded image. As you can see from the picture below I have the PostADay Badge in mine.

Alternative Text: This is for people who choose not to view images in their internet browser, so they can at least see a description. For the PostADay badge you can add “I’m part of Post a Day 2011” but depending on what your image is, choose a suitable short description.

Image Title: This is something that will appear when someone hovers their cursor over the image. I tend to use the same thing as Alternative text.

Caption: Unless you really want to add more info leave this blank. This adds text under the image.

Image Alignment: Leave it as None.

Width: Okay, remember in Step 7 when I said to jot down the dimensions of your uploaded image? Well here you can add them into Width and Height. Often people forget to do this and end up with stretched or blurred images, this bit helps keep your image the right size.

Finally, Link URL: This is where you want people to go if they click the image. As you can see I just added for the example. You can use any link but it’s good practice to keep the link relevant to the image.


Step 11.

You should see a circle appear next to the blue Save button when you click it. After it has vanished you can then click Close. The Image widget box will then shrink back into your Sidebar1 menu.

Now you can look at your blog, click the name of your blog at the top left of the page. Your new image will appear in your sidebar.

If you don’t like the position then return to your Widgets page, click the image widget in Sidebar1, hold it, and drag it up or down the Sidebar1 menu. Boxes with dotted edges will appear and your other widgets will move about as you move the Image widget around. Then as before release the mouse button once you have found a more suitable place for it.

That’s All Folks!

And that’s it. All done, I hope! You can add other images to your Sidebars or Footer/Header bars if you like, just follow the steps. I hope I haven’t missed anything out but do let me know if something is missing or if you have any problems. I’m happy to help if you get stuck.


27 thoughts on “How to add an image widget to your side bar!

  1. This is really helpful! I’m glad I stumbled upon your blog. Thanks for a great post! I can’t wait to add the image to mine.

    – Michelle

  2. I simply want to say I am newbie to blogging and truly liked your web-site. Likely I’m going to bookmark your blog post . You definitely have exceptional articles. Bless you for sharing your web-site.

  3. I always get this Image widget mixed up with the text thingy. Thanks this is so helpful, guess I am visual.

  4. Jackie, thanks for the reply. I had a few probs myself which is why I made the guide. The WordPress solutions thingy isn’t 100% clear, the help sections are pretty decent but at times they assume you know certain things.

    I’m pleased you found this helpful!

Speak to me!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s