In many blog posts of mine, I am using images and sometimes I even publish posts whose only content is an image. I have been asked by other bloggers, how I add a link to another site within WordPress’ native image-caption. Especially using the WordPress.com network, there doesn’t seem to be an easy way to use a link in an image caption. Though, the riddle’s solution is fairly easy, though.

Sometimes, I am using the built-in function of adding and inserting an image to the blog post. But I found out that using a link or, speaking in HTML, using an a href=""-tag within the image caption is not properly rendered. Even if it is entered and displayed correctly in the WordPress Media library-entry of the image, the link will be removed.

But I want to use a link within an image caption to reference a source, or give attribution for the image, or whatever. I think that it is somehow “forbidden” by the WordPress core, similar to the iframe-tag.When using the built-in “add image”-funtionality, WordPress is adding a code to the blog post which (in text-editor mode) will look something like

[caption id="attachment_2552" align="alignnone" width="160"]
<img class="size-full wp-image-2552" src="http://www.xyr.com/wp-content/uploads/2012/02/das_schoene_bild.jpg" alt="Bild-Alternativ-Text" width="160" height="240" />
Bildunterschrift
[/caption]

With some rudimentary HTML-knowledge, you can view the result of the used caption-shortcode in the frontend and use its frontend-output for future postings. Within the text-editing mode of WordPress, you would enter some HTML like:

<div id="attachment_2552" class="wp-caption" style="width: 160px">
<a href="http://www.xyr.com/wp-content/uploads/2012/02/das_schoene_bild.jpg">
<img class="size-full wp-image-2552" src="http://www.xyr.com/wp-content/uploads/2012/02/das_schoene_bild.jpg" alt="Bild-Alternativ-Text" width="160" height="240" />
</a>
Bildunterschrift
</div>

That means, you are tricking WordPress with directly using the HTML-rendered code that the caption-shortcode was designed for doing so. By applying this method, you can override the restrictions of WordPress’ native image-caption rendering – since you are not using WP’s engine.

With directly usind HTML, it is pretty easy to add a link into your image caption. In text-edit mode in WordPress you would simply select the text within the <p class="wp-caption-text"></p> that you want to act as link, clic on “link” in the toolbar and add the link to the image caption. But you could also manually type the <a href="http://whatever.com"></a> into you image caption and add a link to it this way.

Update Dec 25 2015

While translating and adding the post to this blog, I found out that this is no more an issue. At least with a self-hosted WordPress-Blog versioned 4.3.1 or newer. When you are using that environment you can simply add the link in the image caption through WordPress’ Media library, as you normally would. So the code in text-editing mode would look like the following and would properly be redered in the frontend:

[caption id="attachment_21" align="alignnone" width="300"]
<a href="http://www.mywebsite.com/wp-content/uploads/2015/11/funny_image.png" rel="attachment wp-att-21">
<img src="http://www.mywebsite.com/wp-content/uploads/2015/11/funny_image-300x300.png" alt="This is the image camption with a link to Google" width="300" height="300" class="size-medium wp-image-21" />
</a>
This is the image caption <a href="http://www.google.com" target="_blank">with a link to Google</a>
[/caption]

Not being able to add a link to an image caption still might be an issue with using a free WordPress-Blog at wordpress.com. Since I am not having a blog over there anymore, I can’t tell for sure. Are you using a wordpress.com-blog and still having issues using links in your image captions? I’d be glad if you left a comment then and told me, if my workaround-solution helped you.