Remove Extra 10px from Captions

WordPress by default adds an extra 10px to the width of the container that wraps images with captions. This is because the default styling for captions has a thin border that surrounds the entire image.

In a recent design I decided I wanted to caption images in a slightly different way and just have the caption below the image without the surrounding border like so.

Its a cat!

Its a cat!

To remove the additional 10px just add the following code to your function.php.

function remove_caption_extra_width($width) {
   return $width - 10;
}
add_filter('img_caption_shortcode_width', 'remove_caption_extra_width');
In Category: WordPress

Matthew Horne

I am a web developer from the United kingdom who taught himself PHP and JavaScript and continues to build on those skills as well as learn new skills.

Show 2 Comments
  • Richard Barratt 30th April 2015, 8:05 am

    Nice touch here Matt.

    Styling WP Captions is like walking barefoot over Lego – especially in a fluid environment – this will be helpful to many I’m sure! 😀

  • Chris 6th May 2015, 10:06 pm

    Yeah, I agree, that’s a nice clean look for captions… will definitely save this code snippet.

Leave a Comment