Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CrisHazzard/7fddb80281822000995e to your computer and use it in GitHub Desktop.
Save CrisHazzard/7fddb80281822000995e to your computer and use it in GitHub Desktop.
WordPress adds fixed widths to divs with image captions. Add this code to your functions.php file to remove the fixed width and height so you can properly style with CSS.
<?php
//------------------------------------------------------------------------------
// Remove height and width automatic from image captions
add_shortcode('wp_caption', 'fixed_img_caption_shortcode');
add_shortcode('caption', 'fixed_img_caption_shortcode');
function fixed_img_caption_shortcode($attr, $content = null) {
if ( ! isset( $attr['caption'] ) ) {
if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
$content = $matches[1];
$attr['caption'] = trim( $matches[2] );
}
}
$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) . '" ';
return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">'
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
?>
@CrisHazzard
Copy link
Author

Used on my hiking blog to allow my images and captions with hiking directions to be responsive.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment