Adjusting Caption Frame Width

WordPress captions come with a fixed frame which is set in the wordpress core file ‘media.php’ in the ‘wp-includes’ folder.

The caption shortcode function adds a 5px wide space to the left and right of the image; and outputs the new calculated width as in an inline style in the attachment div.

For WordPress users, a familiar picture which you can only influence within limits by avoiding a background color for the attachment div.

However, if you want to have a slim contempory design and a background color behind the caption text, this would simply not work.

You need a fix.

The code below can be added to functions.php of your theme to allow you to set the frame width on your captions (sitewide) to any amount you like.

You need to adapt a few .wp-caption styles in style.css of your theme, after you have successfully added the code – that is all.

There you have your new contempory slim image caption design.

add_shortcode('wp_caption', 'slim_img_caption_shortcode');
add_shortcode('caption', 'slim_img_caption_shortcode');
function slim_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;

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

 $frame_width = 0; // frame width in pixels per side //

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

edit: added the css class .wp-caption-text

Another step to total freedom of design …

PS – important:

Since wp3.7, there is a filter on the additional caption width;
from /wp-includes/media.php caption shortcode section:
$caption_width = apply_filters( 'img_caption_shortcode_width', $caption_width, $atts, $content );

Adding a filter function for it in functions.php of your theme should help to remove the extra 10px from the front wp-caption size;
example:

add_filter( 'img_caption_shortcode_width', 'slim_img_caption_shortcode' );
function slim_img_caption_shortcode( $caption_width ) {
return 0; 
}

this will replace the above suggested code, which stopped working with the latest wp versions.

Unfortunately, this filter is not applied to the styles in the visual editor.

2 Replies to “Adjusting Caption Frame Width”

  1. Helpful script, but in my WordPress install ‘caption’ wasn’t passed in through as an attr. I fixed it using the following code:


    if ( ! isset( $attr['caption'] ) ) {
    if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
    $content = $matches[1];
    $attr['caption'] = trim( $matches[2] );
    }
    }

    I put it directly before the extract() call on line 9.

    Hope this helps someone out!

    1. Hi Chris, thanks for the code – possibly caused by the latest changes to the caption shortcode, in wp3.4 (?)

Leave a Reply

Your email address will not be published. Required fields are marked *