{"id":6145,"date":"2010-08-09T07:00:38","date_gmt":"2010-08-09T12:00:38","guid":{"rendered":"http:\/\/www.casadeblundell.com\/jonathan\/?p=6145"},"modified":"2010-10-23T00:38:01","modified_gmt":"2010-10-23T05:38:01","slug":"adding-links-to-image-captions-in-wordpress","status":"publish","type":"post","link":"http:\/\/casadeblundell.com\/jonathan\/adding-links-to-image-captions-in-wordpress\/","title":{"rendered":"Adding links to image captions in WordPress"},"content":{"rendered":"

As you may have noticed, I’ve recently started adding photo captions to the majority of the photos in my new blog posts.<\/p>\n

WordPress has a great feature that lets you add these captions with ease if you’re using an image you’ve uploaded to your site\/server.<\/p>\n

\"\"
Wordpress Caption Field<\/figcaption><\/figure>\n

Simply fill in the caption field with the information you’d like to share (i.e. Rick Rocks out | Photo by Jonathan Blundell) and depending on how your WordPress theme is styled, your results will look something like this:<\/p>\n

\"\"
Arcade Fire - The Suburbs<\/figcaption><\/figure>
\n<\/p>\n

But what if you want to want to add a link to your image caption?<\/h3>\n

With some photos released via Creative Commons, photographers like you to link to a particular site<\/a> if you use their photo.<\/p>\n

Simply adding the URL to the caption is nice, but it doesn’t actually link readers back to the site (kinda defeating the purpose of the license). And if you add the standard HTML code for a link…<\/p>\n

<a href="http:\/\/www.flickr.com\/jdblundell"><\/code><\/p>\n

…the caption will bust and you’ll get nothing.<\/p>\n

But there is an easy solution!<\/h3>\n

I’ve found some rather complicated work arounds on the web, dealing with your function.php file and such, but as of WordPress 3.0 (you really should upgrade if you haven’t) the solution involves changing two characters.<\/p>\n

To add a link within your image caption, simply replace the standard double quotation marks (“) in your hyperlink with a single quotation mark (‘).<\/p>\n

The resulting HTML will look like so:<\/p>\n

<a href='http:\/\/www.flickr.com\/jdblundell'><\/code><\/p>\n

Super easy!<\/strong><\/p>\n

So rather than:<\/p>\n

Business card cubes | Photo by <a href="http:\/\/www.jdblundell.com">Jonathan Blundell<\/a><\/code><\/p>\n

Use this caption:<\/p>\n

Business card cubes | Photo by <a href='http:\/\/www.jdblundell.com'>Jonathan Blundell<\/a><\/code><\/p>\n

And you’ll get these results:<\/p>\n

\"\"
Business card cubes | Photo by Jonathan Blundell<\/a><\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

As you may have noticed, I’ve recently started adding photo captions to the majority of the photos in my new blog posts. WordPress has a great feature that lets you add these captions with ease if you’re using an image you’ve uploaded to your site\/server. Simply fill in the caption field with the information you’d … Continue reading Adding links to image captions in WordPress<\/span><\/a><\/p>\n","protected":false},"author":84,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[3708],"tags":[3612,3711,3713,3712,3710,3709,1901,415,1184],"class_list":["post-6145","post","type-post","status-publish","format-standard","hentry","category-wordpress-techno","tag-3-0","tag-captions","tag-html","tag-hyperlink","tag-image","tag-images","tag-links","tag-photo","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pEnSo-1B7","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts\/6145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/comments?post=6145"}],"version-history":[{"count":0,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts\/6145\/revisions"}],"wp:attachment":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/media?parent=6145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/categories?post=6145"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/tags?post=6145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}