WordPress HTML 5 Caption & Remove Extra 10px Width

caption with 10px extra widthSome of you may or may not of noticed something really annoying about WordPress Captions. The default WordPress caption adds an extra 10px width, so if your image is 250px wide, the caption with be 260px.

Altering this with CSS just simply won’t do it as WordPress adds the extra 10px via a filter and in-lines the style attribute.

Since building my new-site and making it responsive I have found myself looking at the WordPress Codex more times than I can remember, Thesis 2.0 opened the door to building Thesis 2.0 Boxes, which are similar to plugins but much more efficient and they allow you to neatly add HTML structures exactly where it’s needed.

Pretty awesome if you ask me…

WP Caption Filter (this is the original filter).

Do Not add this to your functions, I just want to show you what your going to override.

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

function img_caption_shortcode($attr, $content = null) {
	// New-style shortcode with the caption inside the shortcode with the link and image tags.
	if ( ! isset( $attr['caption'] ) ) {
		if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
			$content = $matches[1];
			$attr['caption'] = trim( $matches[2] );
		}
	}

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

	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 ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

Looking at the function above you may notice the problem.

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'

It’s right there in the return, where it says:

style="width: ' . (10 +(int) $width) . 'px">

It’s just a simple piece of maths using php to take the width of the image, add 10 and output the sum.

Remove the additional 10px from WordPress Caption Width

To remove the additional 10px we can create our own filter which will override the default one.

Add this to your themes functons.php, for thesis users custom.php or master.php

function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));
	
	if ( 1 > (int) $width || empty($caption) )
		return $val;

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

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

This will ensure that the width of the caption is the same as the image which allows you to add your own custom caption styling without having to offset any margin, padding or border width.

Phew, glad that’s taken care of, but there is one more thing. Since HTML 5 has pretty much become a must for any savvy developer or website owner. We can also alter the filter to make it HTML 5 compatible.

Converting the WordPress Caption to HTML 5

The following function will add the necessary markup for HTML 5 and remove the additional 10px width from the caption.

Add this to your themes functons.php, for thesis users custom.php or master.php

add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);

function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'aligncenter',
		'width'	=> '',
		'caption' => ''
	), $attr));
	
	if ( 1 > (int) $width || empty($caption) )
		return $val;

	$capid = '';
	if ( $id ) {
		$id = esc_attr($id);
		$capid = 'id="figcaption_'. $id . '" ';
		$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
	}

	return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: '
	. (int) $width . 'px">' . do_shortcode( $content ) . '<figcaption ' . $capid 
	. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}

That’s all there is. So now you have removed that annoying extra 10px from your in-line style and added the correctly HTML 5 markup.

Wordpress Tutorials

About the Author

Matthew Horne

Matthew Horne is an Optimization Specialist whose passion lies in making the web a faster and more efficient place. He has been fighting an uphill battle to change the minds of the masses.

2 comments… add one

  • wpio December 18, 2012, 4:17 pm

    Hey Matthew,

    Great site. I was hoping to contact you about a potential guest post but the ‘human test’ on your contact forms: http://diywpblog.com/contact/ seem to be broken.

    I’d love to hear back from you – will send you a message on Twitter now too.

    Cheers,

    David

    • Matthew Horne December 18, 2012, 4:21 pm

      Replied to you you twitter with the email address.

Leave a Comment

Current ye@r *