How to Add an Image to your Sidebar
It’s not uncommon to visit a website or blog and see beautiful images in the sidebars-images of family members, images showcasing other blogs or sites, and images linking to small businesses and shops. Sometimes, when you use sites like Shareasale or Commission Junction, affiliates links are provided to you so that you can quickly and easily copy and paste the code into your sidebar to display an image. But what about the other images you would like to showcase? How do you add AND link images in your sidebar when no link has been provided? Today, we’re going to show you how quick and easy it can be to do this on your own.
First things first…let’s choose an image.
Before you begin, you’re going to want to select the image that you want to use. If you are selecting an image from your computer, you’ll upload it directly to the media section of your dashboard. If you’re familiar with uploading images to use in your blog posts, then you’ll have no problems uploading an image directly to your dashboard for using in the sidebar. Simply navigate to your WordPress Dashboard, then click on MEDIA > ADD NEW. Once you’re there, you can drag and drop the image that you want to use (or select the file from your computer) to upload it.
Once you’ve uploaded your image, you’ll want to grab the code for your image. You can find this in your site’s image library. Simply navigate to MEDIA > LIBRARY and choose the image you’re wanting to insert into your sidebar and click on EDIT. Once you’ve clicked on it, you should see the full size image appear, along with some information about the image itself (file name, file size, etc.). You should also see something that says FILE URL. That’s the code you’ll need to use for your image. This tells the internet where your image file is located.
Now that you know what image you’re using, it’s time to insert your image code!
Go back to your dashboard and navigate to your widget area (APPEARANCE > WIDGETS) and select the sidebar dropdown menu. It doesn’t matter which sidebar you choose, as the code is the same for all of them. Drag and drop the CUSTOM HTML widget into your sidebar. We’re going to insert some code here to tell the internet WHERE your image is located and WHERE you would like your image to direct readers if it’s clicked on. Here’s the code you’ll need to use:
Let’s break this down…
The a href= part is basically just asking where on the internet you’re wanting people to go if they click on this image. You’ll want to insert the link to your site (or wherever this image is pointing) in between the first set of quotation marks (replacing the first set of text in teal). The img src part of the code is just that: What is the source of your image? Meaning where is this image located? This is where you will place the url you grabbed from your media library. The </a> simply closes out this piece of code and lets the computer know that that’s all you’re including.
Once you’ve learned how to add and link your own images, the possibilities are endless! And if you’re looking for beautiful images and theme photos by Restored 316 Designs, don’t hesitate to join our Affiliate Program! We’re always updating and adding new images to beautify your sidebar!
Spread the word!
I’ve wondered how to do that so I really appreciate the detailed information! Thank you! I recently found your site and have learned so much from it already. As a fairly new blogger there are so many things I’m still learning and it can be overwhelming at times.
You’re so very welcome! I’m so happy you’re learning and enjoying the tutorials!
Hello. I’ve done this and can’t seem to get it to work. It just shows a tiny little icon that looks like an image is supposed to be there but the link may be broken? I’ve copied the image file url just like you said and tried linking it to my about page and just any page once that wouldn’t work and the image still doesn’t up. Any suggestions? Thanks! (I have the darling theme)
Hi Anna! Will you email me directly with your site url and the login information (you can use the contact form here on the site) so that I can take a look for you?
Courtney, I just submitted a contact form message. Once you email me I will give you my login info you need. I currently have my site up with a “coming soon” landing page so if you just go to the site you probably can’t see my page. Just email me and let me know if you’re needing my wordpress login? Thank you so much!
Hey Anna! I just sent you a reply to your contact form submission!
Hi,
Was there an easy solution for Anna’s problem above? I’ve just tried to set up my first image and I have the same problem. A tiny blue question mark.
Thanks,
Vanessa
Hey Vanessa! Ensure that you have the ” ” around the image url! If that doesn’t work, feel free to shoot me an email directly at Assistant@Restored316.com 🙂
Does this work for the Darling theme?
Absolutely! This will work with any of our themes and WordPress in general.
Hi, Lauren!
Why are my sidebar contents all the way at the bottom of my blog page? I’m using the Darling theme.
Thanks much,
Hermie
Hi Hermie,
You’ll want to make sure you’re on the latest version of Genesis and this issue will correct for you!
I am using version 2.4.2. I think this is the current version.
Any other way to fix it?
Thanks,
Hermie
Hermie, it might be best for you to submit a support ticket so we can look at this closer for you.
Ok, thanks a lot.
Hi! Thanks for this great tutorial!
I added my image but it is not centered in my sidebar. It is hugging the left side of the sidebar because the image is not big enough to fill the space.
Is there a code to add to center it in the sidebar space??
Thanks so much!!
Hi Jen!
Sure thing.. just add
Hi I’ve followed these instructions for an image next to the author photo and it shows up, but the next day it’s gone. It gives me a warning about having an alt attribute. What do I need to do? Anchor theme.
Hi Taryn,
In the code for the image add alt=”” …. so the format would be
Hope this helps!
I’d like to use a picture from my computer, but the Media Library will not allow it to download. Any ideas? Thanks!
Hi Katie,
Contact your host to see if there is a size limit on media uploads.
I purchased the market theme for my online store website. I am having issues with the front page 1 widgets. In the demo it shows the “about”, “shop”, “blog”, buttons inside the image. After following the directions given in tutorial, my buttons created from the genesis featured page widget are not inside image but on top of image. I also tried the custom html widget, however it also did not work. I have also tried using both and it just puts them lateral of each other.
Hi Hollie,
Can you go ahead and submit a support ticket on this?
Thank you!
Thanks for this. I have a course on my wordpress site and I would like the image to show on all the pages of the course. Where do I add the code? Thanks for any help you can provide. I have the Refined Theme.
Hi Melanie,
If you want a custom sidebar just for course content (assuming you are building the course on your WordPress site), you could use a plugin like Genesis Simple Sidebars to add the custom sidebar.
Hope this helps!