Adding an image into a WordPress sidebar isn’t the easiest thing in the world as it involves a few steps and also a bit of mucking around with code. Once you’ve done it a few times however it becomes much easier and you will enjoy the control you have over the look and feel of your sidebar.
Before we start I will assume that your image has already been re-sized to fit neatly in your sidebar. If it hasn’t, you will need to do this first because inserting a 3MB, 600 pixel wide image into a 200 pixel wide sidebar isn’t going to do your website any favours 
Step 1: Upload your image
1. In your WordPress admin menu go to Media > Add new:
-
2. Upload the image from your computer
3. Once the image is uploaded, don’t close the Add Image window as you need to copy the image url as indicated below:
-
Step 2: Insert the code into the sidebar widget
1. In your WordPress admin menu go to Appearance > Widgets:
-
2. Expand the sidebar you want your image to appear in. In my case it is the Primary Sidebar
-
3. Drag a text widget into the sidebar and add your code {I will outline what code you need to use in the next step}
-
4. Click to save changes. Your image should now appear in your sidebar.
Step 3: What code should I use?
1. If you just want to show the image and are not concerned about linking it anywhere or aligning it use:
<img src=”THE FULL IMAGE URL THAT YOU COPIED IN STEP ONE“>
Using my image as an example:
<img src=”http://ozbloghosting.com.au/wp-content/uploads/2012/08/MY-IMAGE.jpg“>
2. If you want your image to link to a webpage:
<a href=”FULL URL OF THE WEBSITE YOU WANT TO LINK TO” target=”_blank”>
<img src=”THE FULL IMAGE URL THAT YOU COPIED IN STEP ONE“>
</a>
Using my image as an example:
<a href=”http://ozbloghosting.com.au/?p=133″ target=”_blank”
<img src=”http://ozbloghosting.com.au/wp-content/uploads/2012/08/MY-IMAGE.jpg”>
</a>
3. If you want your image to appear centred in the sidebar:
Simply add <div align=”center”> above all your code and </div> below all your code
For example
<div align=”center”>
<a href=”http://ozbloghosting.com.au/?p=133″ target=”_blank”
<img src=”http://ozbloghosting.com.au/wp-content/uploads/2012/08/MY-IMAGE.jpg”>
</a>
</div>
NB: If your website breaks
It is most likely because you have forgotten to put in the </div> code after the image code.
About Kelly Exeter
