How to add an image into your WordPress sidebar

How to add an image to your WordPress sidebar

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:

How to copy an image URL

-

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://swishonline.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://swishonline.com.au/?p=133″ target=”_blank”
<img src=”http://swishonline.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://swishonline.com.au/?p=133″ target=”_blank”
<img src=”http://swishonline.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.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Comments

No comments yet. Be the first to write a comment.

Got something to say?





CommentLuv badge