Image link widget area

Quick trick to be able to use code in a widget area, even though if you do not know html !

Code in a widget area it’s very easy to do, we will use a little trick  it’s easy.
In this example we are going to make an image with a link. However you can do all sort of things with this easy copy paste trick.

Open a new post:
Insert an image  in the usual way,
Select the image and  click on the icon with the link  enter the url (link) of the page or site you want to point to.
Right in the top of your text editor you see two tabs “visual” and “text”. We are using the visual tab now go to the text tab.
You will see the code but no worries it won’t bite 😉
However it’s a bit bloated meaning there is probably to much code so we are going to delete some.
Your code should look a bit like this:

<a href=""> <img class="aligncenter wp-image-924 size-large" src="" alt="strand-copy" width="604" height="292" srcset=" 1024w, 350w, 300w, 768w, 1590w" sizes="(max-width: 604px) 100vw, 604px" /></a>

Now we going to delete some code only the link starting with “href” and the image starting with “src” will be left. Mind the brackets they are importantÂ

<a href=""><img src="" alt="strand-copy" /></a>

Now copy all the code go to Appearance  >  Widgets and grap a textwidget.
Some text widgets have the same two tabs as the post editor (visual and text) if this is the case make sure you select the “text” tab before pasting the code.
Then save the widget and go to the front end of your site.
Tadaa! You will see an image link in the widget area

Trouble shooting. If the widget is not showing or the link broken make sure you theme support pasting html in the widget area. Also make sure that you copy and paste the code in the right way.

Explanation in Dutch:

Leave a Reply