• Business
  • Design
  • Free
  • Interesting
  • mascot design
  • Resources
  • SEO
  • Web Design
  • Web Development
  • Wordpress
  • Inserting hyperlinks in WordPress image captions

    By Danno

    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.

    "Baby, I know how to add hyperlinks to WordPress captions". "Yeah, that's so hot".Photo by superbomba.

    "Baby, I know how to add hyperlinks to WordPress captions."

    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.

    Be Sociable, Share!

    More...

    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.

    Comments on this article...

    • April Reign:

      great tip!

    • Christopher:

      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.

    • Karen:

      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 ;)

    • Danno:

      @all: Right on, glad to be of help.
      @karen: It’s a wig!

    • createmo:

      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!

    • Timmy:

      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.

    • carluew:

      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

    • frenlyclopolf:

      hi there!
      I made with photoshop anime myspace pictures.
      take a look at them:
      http://tinyurl.com/5w2eqc
      Thank you for your site :-) xxoxo

    • Jeff Standing:

      Definitely fix that code! I'm looking for a way to do this!

    • Trevor:

      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.

    • Trevor:

      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.

    • Starving Artist:

      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.

    • kayjay:

      Where did the code go? This sounds really handy, would love to be able to use it.

    • Hainesy82:

      Check out my comment on http://wordpress.org/support/topic/208122?replies… for a good solution

    • Doron:

      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.

    • jogjacentric:

      thank for your tips, work perfect for me

    • Marcus:

      PERFECT!!! :-)

    • Andy:

      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

    • Phil Richards:

      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

    • Brian Reich:

      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.

    • Coach Store:

      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.

    • Andy:

      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