Let's talk now.
407-476-6930 / 850-366-8392 (PCB)

Make WordPress Captions Responsive

by Brandon Welch
Web Designer/Developer & Web Expert
Connect with me: | Facebook | LinkedIn

At ClicksCrazy.com, we build custom WordPress sites all the time. WordPress allows the user to easily add in image captions.

However, these image captions (generated by WordPress) set fixed widths on their containers, which of course won’t work with a Responsive website.

The Solution to Making WordPress Captions Responsive:

The Code


/* Make Caption Images Responsive. */
function cc_responsive_img_caption_filter( $val, $attr, $content = null ) {
extract( shortcode_atts( array(
'id' => '',
'align' => '',
'width' => '',
'caption' => ''
), $attr
) );
if ( 1 > (int) $width || empty( $caption ) )
return $val;

$new_caption = sprintf( '

%4$s

%5$s

',
esc_attr( $id ),
esc_attr( $align ),
( 10 + (int) $width ),
do_shortcode( $content ),
$caption
);
return $new_caption;
}

Where to Add the Code

To your Themes main functions.php file.

Enjoy friends!