Users of WordPress 2.6 will know that you can insert captions underneath photos and images within your posts. If any of you have tried to add hyperlinks within a caption, you’ll also know that WordPress will strip that link faster than a suspected terrorist at LAX when you hit save.
Photo by Now, I’m not techy enough to know exactly why WordPress strips links from captions but it does. I do know that with some fiddling about, I finally found a fairly straight forward workaround that doesn’t involve custom fields or plugins.
My situation might be a little different. I wanted to actually have a secondary caption of sorts to use as a photo credit and have a caption for the photo.
What seems to work for hyperlinking text within WordPress captions is nesting the link within small tags before the end of the WordPress caption tag, like this:
PGNvZGU+DQo8c21hbGw+RXhhbXBsZSBvZiA8YSBocmVmPSJodHRwOi8vd3d3Lmxpbmt5bGlua3kuY29tLyI+DQpsaW5rZWQgY2FwdGlvbiB0ZXh0PC9hPi48L3NtYWxsPg0KWy9jYXB0aW9uXQ0KPC9jb2RlPg==
I’m not sure why this technique of using small tags does the trick. As you can see from the picture above, it does work.
Once you’ve got your small tag in there, you’ll need some CSS if you want to position that tag somewhere special. I wanted it off to the left so that it would be a photo credit, visually separate from the caption but still within the WordPress caption tags. The CSS I used for positioning is as follows:
PGNvZGU+DQojY29udGVudCBzbWFsbCB7DQoJZm9udC1zaXplOiAwLjdlbTsNCgljb2xvcjogIzc1NzU3NTsNCglmbG9hdDogbGVmdDsNCn0NCjwvY29kZT4=
Hope this works for you and if you have another, preferably easier or sound workaround for this issue, lets hear it.
More...
- Inserting SPAN into WordPress categories using wp_list_categories
- Custom Page Templates Not Showing Up in WordPress
- Switching between WordPress Visual and HTML editor not working
- WordPress Baby Themes
- Free Hosting For WordPress Blog
About the author
Danno started freelancing in 1996. He is the co-founder and (ex) President of Graphics.net, owner of FeedIcons.com, EliteFreelancing.com, FastCharacters.com and SteelAndSnow.com. He digs wind, waves, guitars and circles. Follow Danno on Twitter.
October 4th, 2008
great tip!
October 4th, 2008
Wow, that’s an amazing tip! I hadn’t even though about inserting caption links before but now that you mention it, it will be wonderfully handy.
October 4th, 2008
Hey, sweet. I’ve been trying to figure it out on my own, to no avail. thanks for the tip. nice pic btw, you look good with hair ;)
October 4th, 2008
@all: Right on, glad to be of help.
@karen: It’s a wig!
November 2nd, 2008
Thank you for your site :)
I made on photoshop backgrounds for myspace and youtube and more
my backgrounds:http://tinyurl.com/6exhae
take care and thank you again!
November 17th, 2008
Can't get this to work. Could you paste here a sample code (now it shows "PGNvZGU+DQojY29udGVudC", which I can't decode)? It would be much appreciated.
November 18th, 2008
I found something called a cpn number that will
give you a new credit profile within 30 days.
the website is
http://www.creditmenow.info
November 27th, 2008
hi there!
I made with photoshop anime myspace pictures.
take a look at them:
http://tinyurl.com/5w2eqc
Thank you for your site :-) xxoxo
December 9th, 2008
Definitely fix that code! I'm looking for a way to do this!
December 25th, 2008
Was looking for this, found it only to be disappointed that the code is unintelligible. No big deal.
You can do this by jumping into HTML and just prior to the [/caption] piece of code, simply throw the caption with link or whatever you want (mine is photo credit from flickr like the post above… DONT FORGET to link to the license too.) into a DIV.
So in other words, insert: <DIV class="img-credit">Photo by: Joe SchmoeLicense</DIV>
right before [/caption].
Then go to your css and put in a new line for ".img-credit", add your styling, and you're all set.
Optionally you could probably use a SPAN too, but DIVs are more flexible with styling.
It would be great if we could work this into the Insert Image GUI but I don't know much about WordPress PHP yet.
December 25th, 2008
Interesting, it automatically parses the link HTML so you'll just have to imagine that the "Joe Schmoe" and "License" bits are a href links.
February 10th, 2009
I eventually gave up trying to find an easy way to add captions with hyperlinks and now I just code it all myself. Thank goodness for copy and paste.
February 23rd, 2009
Where did the code go? This sounds really handy, would love to be able to use it.
February 26th, 2009
Check out my comment on http://wordpress.org/support/topic/208122?replies… for a good solution
June 8th, 2009
Here's what I did on my WP 2.7.1 blog and it worked perfectly:
[caption id="attachment_9" align="alignleft" width="300" caption="link goes here" ]<img src="…
Basically, I went into the HTML editor for my post, and placed the anchor tag write inside the caption value, but I used SINGLE QUOTES to house the URL.
Very simple solution that seems to be working perfectly for me.
June 30th, 2009
thank for your tips, work perfect for me
January 8th, 2010
PERFECT!!! :-)
February 1st, 2010
Thanks Trevor,
this worked fine for me.
Danno, if you could fix this code on the article this would be great. Really like to know how to split the caption into two parts. This is a very good idea. Thanks
May 6th, 2010
Hi, not all the tips worked for me, but I developed this format which did work. The format does not use any CSS changes or Divs and is designed to be easy, hence its a bit long winded. Its a version of Hainesy82's comment on the wordpress support forum.I hope this helps !
1. Upload image into Gallery
2. In the article put the cursor where you want the photo
3. Click Insert Image
4. Locate Image
5. Insert Alt Text
6. Insert Caption as
Photo Credit: Name of FlickR Profile
7. Remove the image URL
8. Choose Left or Right
9. Choose size
10. Click Insert into post
11. Add the following just before the [/caption] tag
small>Photo Credit: FLICKR PROFILE NAME</small>
You will need to copy and paste the FlickR URL and the FlickR Profile name from the preparation document
12. In the HTML of the image, edit the html so that it reads caption=" " this is two spaces on the keyboard between the " quote marks.
13. Click save draft and then view the post the image should be ok now !
Phil
June 17th, 2010
I do it the same way as Doron, except, well… opposite. I use caption='link code' so I can still use double quotes for the attributes of my anchor tag. I guess the only reason it matters is that your markup can still validate in this fashion.
November 8th, 2010
Congrats for releasing such a nice post. This is nice post which I was awaiting for such an artice and I have gained some useful information from this site. I admire the valuable information you offer in your articles.
November 24th, 2010
Struggling to get this solution to work in 3.0 too, but Ive found a work around to get a link in the caption. Just wrap your link in single quotes. Simples