Image Caption Div adding 10px

Which theme are you using?

It’s one I have built from scratch.

The site is still under development. The content is still just sample stuff that the intended owner is using to practice using the wordpress cms.

Your article elements have inline styling increasing the width to more than you want, isn’t that the issue instead?

Incidentally, this is the page where I found the code for the functions page I mentioned above:

43 | Adjusting Caption Frame Width

I don’t know. I can’t see the issue.

Are you using Chrome or Firefox?

Safari, but the issue seems to show up in chrome and firefox as well.

this is the page where I found the code for the functions page I mentioned above

I wrote that a while ago, and the core code might have changed in the meantime ??

the suggestion below is based on the latest media.php code;

try and add this to functions.php of your theme:

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

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

/**
 * The customized Caption shortcode.
 *
 * original code in /wp-inlcudes/media.php
 */
function custom_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, 'caption'));

	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: ' . ( (int) $width) . 'px">'
	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

the edited part is the second last line which reads in the original code in /wp-inludes/media.php:

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

That seems to have not had any effect this time around.

Sorry. it’s working. Thank you very much for that.

Cheers,.

P.S. Issue is resolved and I need to change the resources I provided. I hope the description is enough for others looking for help with this same issue.

Thanks for the fix! Works great.

I did change the

<p class=”wp-caption-text”>

to

<div class=”wp-caption-text”>