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:
<a href="WHERE YOU WANT YOUR IMAGE TO LINK TO"><img src="URL OF YOUR IMAGE"></a>
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!