removing inline styles from wp-caption div

Inline width and height attributes were never a huge problem with images in WordPress, since these were easily overwritten with CSS.

The problem I’m having is that any images with captions are being wrapped in a ID ‘attachment_(‘attachmentnumber’) and a class of ‘wp-caption’ AND they’re given inline CSS width and height properties.
This is a major pain in the butt, so I’d like to remove the inline styles of this div if at all possible.

Related posts

Leave a Reply

2 comments

  1. You can override inline styles with “!important” like this:

    width: 100px !important;
    

    If you want a PHP fix take a look at this:
    http://troychaplin.ca/2012/06/updated-function-fix-inline-style-that-added-image-caption-wordpress-3-4/

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

    or javascript/JQuery:

    $(".wp-caption").removeAttr('style');