One feature I would like to see in WordPress is the ability to just drag any image you have uploaded into your website into a sidebar widget. Wouldn’t that be easy? Yes of course it would, however this option does not exist at the moment and you will have to follow my steps to manually add an image to your sidebar. There possibly could be a plugin that does this for you but I have too many plugins installed already and it does not take long to do this yourself.
It’s not as if you are going to be adding an image to your sidebar every day. This process would usually only be done once or twice on the average WordPress website and when it is done, you can leave it in place for as long as you wish.
Why would you want to add an image to the sidebar?
- You might want to add a small banner, like I have in the video below, to promote something on your website.
- You might want to add a picture of yourself in a prominent position on your website.
- You could just add an image to the sidebar for website design purposes. Maybe you need a bit of color to jazz up the place.
How to add an image to your sidebar?
The first thing we have to do is upload the image we want to insert into our WordPress website sidebar.
1. Go to the side menu in your WordPress Dashboard and click on Media.
2. Click on the Add New button.
3. Upload your image and copy the image url. See the screen shot below.
Now we need to place this URL and some html into a text widget in the sidebar.
1. Click on Appearance in the side menu of your website dashboard.
2. Then click on Widgets.
3. Grab a text widget and drag it into your sidebar. Mine is called the primary sidebar in the picture below.
4. Open the text widget by pressing the tiny drop down arrow.
5. Paste your Url that you copied into the widget. Add the Html to your URL. See tutorial below.
6. Press save.
How to place your Image URL into html code:
In order for your image to show, we have to command it to by using html. As you can see below, I have given an example of where to put your image URL. You must use the <img src= tag, then your URL, and then end the tag with />.
Sample of the html code to insert an image into a sidebar:
<img src=”http://tips4pc.com/wp-content/uploads/2010/09/ebook-signup2.png” width=”300″ height=”75″ />
Here’s how to make your image into a hyperlink:
<img src=”http://tips4pc.com/wp-content/uploads/2010/09/ebook-signup2.png” width=”300″ height=”75″></a>
Tips to creating the HTML for your image to appear:
- Copy my HTML code for a starting point and paste it into your text widget.
- Replace the image URL with your image URL.
- Use this code for just the image without resizing it <img src=”Image URL” />
- If you want to make your image a link, replace the PINK URL above.
Watch this video to see me actually adding an image to my sidebar. I will also show you how to re-size it so it will fit nicely into its spot.
How to re-size the image to fit into the WordPress website sidebar?
This section of the html is setting the image size: width=”300″ height=”75″
If you wish to adjust this then all you have to do is change the numbers in the “”””.
Please see the video for more details on how to do this.
Download this article as a PDF (Will open in another browser window. You can then save it to your computer).