Add Description Field To Images In WordPress

When adding an image via the default WordPress image uploader, one option among many is the ability to define a description….

Interestingly enough, when embedding the image inside of a post, the description field unlike the caption field does not display by default.  Recently for a project, we needed to utilize the description field to dump in additional photo information, while the caption field was used to provide the regular text caption.

To get WordPress to display the description inside the post we had to override the the default image shortcode function WordPress used to generate the final HTML output for the images inside posts.  Then we needed to make some changes to our stylesheet and we were set. Here’s a step by step:

1. Drop this into your functions.php file…

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

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

	// Allow plugins/themes to override the default caption template.
	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
	if ( $output != '' )
		return $output;

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

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

	// Grab ID to query post_content [description] field for image
	preg_match('/([\d]+)/', $id, $matches);

	$description = '';
	if ($matches[0]) {

		global $wpdb;
		$custom_description = $wpdb->get_row("SELECT post_content FROM $wpdb->posts WHERE ID = {$matches[0]};");

		if ($custom_description->post_content) {

			$description = '<p class="wp-custom-description">'. $custom_description->post_content . '</p>';

		}
	}

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

	return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
	. do_shortcode( $content ) . $description . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

If you look at this line…

$description = '<p class="wp-custom-description">'. $custom_description->post_content . '</p>';

…you’ll notice where we dumped the description into a paragraph with a class of “wp-custom-description”. Feel free to modify the code to wrap whatever HTML around the description you need (div, span etc), in whatever location you need.

2. Edit your CSS file to style your new description…

 p.wp-custom-description { /*Some CSS Goodness Here */ } 

That’s it, you’re done! Here’s an example of the description in action….

Photo Location: North Pole

Three Penguins Discussing The Economic Stimulus Package