In order to make a clickable widget you need to do one extra step before copying the HTML code of your picture within the text portion of the WordPress editor. I will again outline the steps you will need to do, to make a widget with an image, but this time the extra step will be in bold.

  • 1.Take a free picture of your own or from a site like Pixabay
  • 2.Resize it so it will fit in your sidebar
  • 3.If need be, customize it with a free program like BeFunky
  • 4.Open a blank new page or post in your WordPress editor
  • 5.Click the Add Media button and add your image
  • 6.In the Attachment Display Settings click on where it says “Link To” then select Custom URL and paste in the link where you want people to go, then click Insert Into Post (See below image)
  • 7.Now click on the Text tab within the WordPress editor and copy HTML code of your picture
  • 8.Go to Appearance -> Widgets in left menu in WordPress dashboard
  • 9.Grab a Text widget and drag it up into where it says Sidebar and when the Text widget opens, paste in the HTML code and click save.

Now your widget is clickable and will take anyone who clicks on it to the link you placed within the Custom URL section of the Attachment Display Settings. Again, this can be used to send a person to a specific page or post on your website, to an affiliate link, or to any other link.

NEXT UP = Finding images to use for your widgets


Join the Discussion
Write something…
Recent messages
Chrissies Premium
That sounds great, but i have never seen the html for any of my photos, where would `i find it do you think?
Reply
boomergp08 Premium
Do exactly what I explain above. Open a new blank page in WordPress, upload an image to the blank page, click on the Text tab, and there will be the html code for the image.
Reply
BobBarr Premium
If you want to see the raw HTML code for any of your pages, open the page in wordpress for editing. In the upper right corner of the editing window, click on the tab labeled "Text". Doing that will switch the display from the visual editor to the HTML editor. Your photos will be enclosed within a tag that starts with the characters "<img".
Reply
Chrissies Premium
Thank you so much Bob. I have learned so many things today!! :)
Reply
Tirolith Premium
Well done.
Reply
boomergp08 Premium
Thank you.
Reply
Mike-Writes Premium
Thanks for the great tutorial, Robert.
Reply
boomergp08 Premium
You are welcome Mike. I am glad you liked it.
Reply
Debs3 Premium
Thank you, Robert!
:)
Reply
boomergp08 Premium
You are welcome Deb.
Reply
LenaMiglena Premium
Another great training! I actually knew how to do this but you outlined it very well and I am sure it will be of a help to many people. Thank you for your time to share with us!
Reply
boomergp08 Premium
You are welcome Miglena. It was my pleasure sharing with the WA community.
Reply
Top