Adding links to image captions

I’m wondering the same thing.

Insert the image first with a plain text caption. Then using the visual editor, select the part of the text you want to be the link, click the Link button in the editor, and type in the URL. The caption itself is text in the post, and can be edited in the post.

i tried making the link in the visual editor, as suggested above, and when I save the page it strips out the link. any other sections? thanks!

turn off the visual editor and try it in the html mode.

copy your link. highlight your caption. hit the link button and paste in your link. it should not matter if the alt tag is the same as the caption.

if you wish to open a new window when the link it hit add…

target=”_blank” immediately following your link =
<a href="domain.com/path/" target="_blank">you caption</a>

the visual editor can sometimes breaks things.

The html editor doesn’t seem to work either. Any other suggestions?

one way, strange though, of getting hyperlinks on image caption is explained here.
You could something like what I did:
Insert the image you want, click on it to edit. insert in the caption name field anything, “a” for example, and save. go to the html mode and you will see the “[caption]… [/caption]“. insert the link you want before “[/caption]” within small tags. Like this:
[caption]…
<small>
Name of caption
</small>
[/caption]
Then, you have to remove the “a” you inserted just for the caption tag to appear in the code. Replace it with a simple blank space. If you remove everything that labels the caption in the code, the editor will remove the entire caption tag afterwords. A simple space is inoffensive. That’s it.

Whoa! How did anyone ever discover that? I’m impressed! ??

My solution for now is simply to style p.image-caption so that it looks like an actual caption. I’m not thrilled with this, but (no offense) at least it’s quick & easy. I’ll experiment with yours, though. Thanks for posting it.

pilcrow – Thanks for the much shorter solution. But the thing is I know very little of CSS. That’s why I did that long solution. My knowledge is so shot that i didn’t even understand your solution! Could you, please, give a short “tutorial” to how do it in your way? Tanks a lot!

Sure. Sorry for being cryptic!

Don’t use the image editor for captions at all. Instead, insert the image the usual way, and below it (in the post editor), type a paragraph with the photo credit link. Then switch over to html view and add <p class="img-cap"> before, and </p> after, the credit.

Now, in your stylesheet add something like

p.img-cap {
	margin-top:-1.5em;
	font-size: .75em;
	font-style:italic;
	text-align:right;
	padding:2px 0 0;
	}

You’ll probably want to adjust the margins & padding to suit your own theme; this is what worked with mine. Sorry my site’s not live yet, or I’d show you it in action.

We solved this on https://www.thegambiablog.co.uk by using a small amount of jquery code.

Basically in our captions we can add links like so:

This is a caption text {link:https://www.google.co.uk/}that links to google{/link} - great!

Then I put the following code in footer.php

<script type="text/javascript">
    jQuery().ready(function() {
        jQuery("p.wp-caption-text").each(function(n) {
            this.innerHTML = this.innerHTML.replace(new RegExp("{link:([^}]*)}([^{]*){/link}"), "<a href=\"$1\">$2</a>");
        });
    });
</script>

Hey jvmm, I’m trying your solution, but there’s one thing I’m unclear on. Where do you insert the actual link? You demonstrate where “name of caption” is inserted, but I don’t see any destination for the link itself. Thanks for the help.

Hainesy82 – You rock! This solution works perfect, thanks for posting it!

Agreed. Thanks Hainesy82.

Absolutely what I was looking for, Hainesy82. Thanks!
Is it possible to target the link “blank” or, even better for me, to “shadowbox” it?

Good Work Hainesy. Sometime, somebody should look at the code that handles the caption shortcodes and figure out why it’s removing links. In the meantime, Hainesy’s solution is great.

MrPascal, if you want to change the way the link is structured, just change this line:

this.innerHTML = this.innerHTML.replace(new RegExp("{link:([^}]*)}([^{]*){/link}"), "<a href=\"$1\">$2</a>");

Regular expressions are wildly confusing, but you can think of this one like this: the \”$1\” is going to be your url – if you wanted to set it to target _blank, you’d just change it to this:

this.innerHTML = this.innerHTML.replace(new RegExp("{link:([^}]*)}([^{]*){/link}"), "<a href=\"$1\" target=\"_blank\">$2</a>");

If you wanted to add some extra info to shadowbox the link, you’d just add whatever info you need after the url after the $1, and add the new class in the same place I added the “target”.

Good luck!