Automatically add links to WordPress image captions

As I mentioned in my previous post, the UA News sites have a few custom functions that improve upon certain things WordPress does (or does not do) by default.  One such function is automatically adding a link to the captions for a high quality image. When a user decides to link the thumbnail of an image to the full sized version, WordPress does not store that information in the database. This makes it particularly difficult to determine what’s going on with that image since things are being done on the front-end.

I have seen some solutions such as using the HTML editor to manually add a link to the caption shortcode, but this is messy, complicated, and at risk of being wiped out when switching back to the Visual editor. I have also seen a solution that adds a link below each picture, but it was just to a general URL and not the larger version of that image.

After coming up empty, I managed to come up with my own solution by:

1. Overwriting the caption shortcode with a custom function
2. Using Regular Expressions

If you haven’t already created a functions.php file for your theme, you will need to do so now.  Once you have created that file, add this code.

function nwp_caption_shortcode($attr, $content=null){	

	if ( defined('CAPTIONS_OFF') ){
		return $content;
	}

	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));

	if ( 1 > (int) $width || empty($caption) ){
		return $content;
	}

	$hq_url = preg_match('/<a>]+href="([^"]+(png|jpeg|jpg|gif))"[^>]*>/', $content, $matches);
	if($hq_url) $hq_output = "<a href=".$matches[1]." class="photo">High Quality Photo</a>";

	if ( $id ) $id = 'id="' . $id . '" ';

	$output = '
<div style="width:' . ((int) $width) . 'px;">'
	. $content . '
' . $caption . '
' . $hq_output . '</div>
';

	return apply_filters('nwp_caption_shortcode',$output);
}

add_shortcode('caption','nwp_caption_shortcode');
add_shortcode('wp_caption','nwp_caption_shortcode');

Basically, we are creating a new function called “nwp_caption_shortcode” then searching through the caption to find an href that points to an image and if found, output a High Quality Photo link.

The important bit is this regular expression search and replace.

	$hq_url = preg_match('/<a>]+href="([^"]+(png|jpeg|jpg|gif))"[^>]*>/', $content, $matches);
	if($hq_url) $hq_output = "<a href=".$matches[1]." class="photo">High Quality Photo</a>";

I am by no means a RegEx expert so if anyone sees room for improvement, feel free to comment.

Here is an example of the final result.