Add Snippet To Project
Ever noticed how WordPress automatically adds inline styles to your image captions? While this may work for some, it won’t be ideal for everyone, particularly if you prefer to manage styles through an external stylesheet. The inline styles can conflict with your theme which can lead to inconsistent frontend display. In this article, we’ll guide you step-by-step through the process of removing WordPress’ default inline styles for image captions. Job done, you’ll gain more control over your site’s appearance and performance.
add_shortcode('wp_caption', 'wpturbo_fixed_img_caption_shortcode');
add_shortcode('caption', 'wpturbo_fixed_img_caption_shortcode');
function wpturbo_fixed_img_caption_shortcode($attr, $content = null) {
// New-style shortcode with additional attributes.
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) . '">'
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
The code snippet here alters the default inline style of WordPress captions by redefining the caption shortcode. Specifically, it replaces the ‘wp_caption’ and ‘caption’ shortcodes to generate an alternative HTML structure when caption shortcodes are encountered.
This snippet begins by removing the default ‘wp_caption’ and ‘caption’ shortcodes and replacing them with a new function called ‘wpturbo_fixed_img_caption_shortcode()’:
add_shortcode('wp_caption', 'wpturbo_fixed_img_caption_shortcode');
add_shortcode('caption', 'wpturbo_fixed_img_caption_shortcode');The newly defined function ‘wpturbo_fixed_img_caption_shortcode()’ contains the code that generates our customized caption shortcode. This function receives two parameters, $attr and $content. The $attr parameter is an associative array of attributes, and $content includes the image and caption text.
Inside the function is an if-statement that checks to see if the caption attribute is set. If it is not, a regular expression is used to parse the image and any following content (caption text). The parsed image is then assigned back to $content, and the remainder (caption text) is assigned to the caption attribute of the $attr array.
if ( ! isset( $attr['caption'] ) ) {
if ( preg_match( '#((?:<a [^>]+>s*)?<img [^>]+>(?:s*</a>)?)(.*)#is', $content, $matches ) ) {
$content = $matches[1];
$attr['caption'] = trim( $matches[2] );
}
}The apply_filters() function then enables modifications of the HTML structure through plugins or themes. If ‘img_caption_shortcode’ filter returns a non-empty value, this value will be used and returned as the final HTML.
Next, the shortcode attributes are extracted and normalized using shortcode_atts() function.
extract(shortcode_atts(array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr, 'caption'));If the provided width is less than one or no caption text is present, the function ends returning just the inputted content without any changes.
if ( 1 > (int) $width || empty($caption) )
return $content;Finally, if all the conditions are satisfied and there is a caption to display, it constructs and returns the caption HTML without inline width styles.
if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">'
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';This code will render a div with the designated id, alignment class, and a child p tag containing the caption text. The ‘wp-caption-text’ class will give extra control over CSS styling if necessary. do_shortcode( $content ) will ensure all shortcodes in the content are processed, this could be important if the image itself is added by a shortcode.