However, after encountering a few clients who were still learning how to use WordPress the question on how to add images to widgets keep popping up. So, I am going to show you a couple methods. One of these may be easier that the other.
The first method is using WordPress to you advantage. The second method is a crash course in basic HTML.
Add Images to Widgets in WordPress – Using The Add Media
1. Create a new post or page.
2. Click the Add Media button.
3. Upload the image you want to use, or if you have already uploaded the image, select it.
4. Label your image.
5. Click the button to insert the image into the new post or page.
6. Copy the code inserted into your post. (You will want to have the post editor in the HTML mode tab.) The code will look similar to the following:
<img src="YOURIMAGE" alt="IMAGENAME" width="200" height="200" class="alignnone size-full wp-image-5" />
You might want to edit that code down to:
<img src="YOURIMAGE" alt="IMAGENAME" />
7. Go to Appearance> Widgets
8. Drag a Text Widget to the widget area you want your image to go.
9. Paste your HTML into the widget.
<img src=”https://blondish.net/wp-content/uploads/2013/09/add-image-wp-5-252×300.jpg” alt=”add-image-wp-5″ width=”252″ height=”300″ class=”aligncenter size-medium wp-image-7280″ />
10. Click the button to save your widget.
Add Images to Widgets in WordPress – Using HTML
In HTML, the basic markup for an image is:
<img src="LINKTOYOURIMAGE" alt="NAMEOFIMAGE" />
You will replace LINKTOYOURIMAGE with the URL to the image that you want to use. This could either be from an external source or from your own WordPress Media Library. You will need to get the image’s link by going to your Media Library and clicking Edit on the image. You will then copy the File URL that is in the box to the right of the image.
You will also need to change NAMEOFIMAGE to the name of your image. This is there as a means to label your image. It is consider part of valid markup and beneficial for search engine optimization.
The following HTML includes linking to another website or URL:
<a href="LINKTOWEBSITE"><img src="LINKTOYOURIMAGE" alt="NAMEOFIMAGE" /></a>
The following HTML includes linking to another website or URL and making that link open in a new window.
<a href="LINKTOWEBSITE" target="_blank"><img src="LINKTOYOURIMAGE" alt="NAMEOFIMAGE" /></a>
With any of the code, you just go to Appearances > Widgets in your WordPress backend. Then you drag over a text widget and past your code. If you need to position the image better, you might have to add some styling.
<img src="LINKTOYOURIMAGE" alt="NAMEOFIMAGE" style="width: 200px; margin: 0px 5px 0px 0px;" />
Personally, I like the second, rather than using the first method.
How do you add images to widgets in WordPress?