Stop WordPress | Adding 10px Width to Image Captions

Stop WordPress from adding 10px Width to Image Captions

It is easy to stop WordPress from adding 10px width to image captions. This article shows you how to override the default styling.

WordPress Captions – Default 10px Padding

The WordPress caption default is a shortcode located in wp-includes > media.php file.  The function img_caption_shortcode specifies a 5px wide space to the left and right of the image.

WordPress says, “By default, the caption is 10 pixels greater than the width of the image, to prevent post content from running up against a floated image.”

There are many reasons you might want to change the default.  There are also many ways to remove WordPress’s 10px padding from captioned images.  The code provided in this article will solve both of the following issues:

1 Stop WordPress from causing a 10px upscale of captioned images

Some themes set image width to fit 100% into the container that wraps images with captions. Therefore, browsers upscale the width of some images by 10px.  That is not ideal because upscaled images lose sharpness and quality.

Note: The user contributed  code (by ElectricFeet) removed the padding but also caused my image to upscale (via browser).

Screen Shot 2016-08-21 at 7.15.38 PM

The top shows HTML where the wp-caption class has a width style 10px greater than the image. We see the result in Firefox’s Page info is an upscaled image.

2 Use a different styling for captioned images

You might not want images to have a caption div that includes a 5px bordered space on the sides of your image. You want the width of the caption frame to be the same as the image, while keeping the caption-text outlined.  Example:

Screen Shot 2016-08-21 at 1.28.59 PM

How to Remove Default 10px Padding

You can change the default by hacking the core code found in the media.php.  However, if you do that your changes will be over written by WordPress updates.  WordPress updates a lot.  An easier solution is adding a function to your theme functions.php. This is the preferred method even though changes can also be over written with theme updates (unless you set up a child theme).

Always back-up functions.php before making changes; the back-up file comes in handy for restoring the default file in case something goes wrong.

To edit your theme’s functions.php:

  1. Log in or sign in WordPress as administrator.
  2. Select “Appearance > Editor” from the sidebar.
  3. In the editor, select the theme which you want to edit from “Select theme to edit” drop-down menu.
  4. Locate and double-click “Themes Functions (functions.php)” under “Theme Files”, “Templates” section.
  5. Add the following code to the bottom of the file and click Update File:
/**
 * Remove WP's default padding on images captions
 */
 function remove_caption_padding( $width ) {
 return $width - 10;
 }
 add_filter( 'img_caption_shortcode_width', 'remove_caption_padding' );

Source.

Stop WordPress | Adding 10px Width to Image Captions

Share the post by clicking one of the share buttons.

Leave a Reply

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