2

How do you add a new class to the HTML generated when an image with captions is added?

For example, from this:

<div id="attachment_xyz" class="wp-caption alignleft"...

to this:

<div id="attachment_xyz" class="wp-caption alignleft my_new_class"...

Adding, in this case, my_new_class.

Thanks, Scott

Improve this question
2
  • 1
    Did you read this answer? It is almost the same, the second parameter for str_replace just has to be changed to 'class="wp-caption '.
    – fuxia ♦
    Dec 3, 2012 at 10:26
  • I wonder why when people try to help they actually get downvoted. Anyways, I still don't understand how to do this - that is, implement the code. Which code exactly would I use? Any help, with good intentions, would be appreciated. Exact code, in kindergarten language :)
    – scottdaris
    Dec 4, 2012 at 1:50

2 Answers 2

Reset to default
4

Adapted from this answer

Add this code to your functions.php file:

add_action( 'after_setup_theme', 'wpse_74735_replace_wp_caption_shortcode' );

/**
 * Replace the default caption shortcode handler.
 *
 * @return void
 */
function wpse_74735_replace_wp_caption_shortcode() {
    remove_shortcode( 'caption', 'img_caption_shortcode' );
    remove_shortcode( 'wp_caption', 'img_caption_shortcode' );
    add_shortcode( 'caption', 'wpse_74735_caption_shortcode' );
    add_shortcode( 'wp_caption', 'wpse_74735_caption_shortcode' );
}

/**
 * Add the new class to the caption.
 *
 * @param  array  $attr    Shortcode attributes
 * @param  string $content Caption text
 * @return string
 */
function wpse_74735_caption_shortcode( $attr, $content = NULL )
{
    $caption = img_caption_shortcode( $attr, $content );
    $caption = str_replace( 'class="wp-caption', 'class="wp-caption my_new_class', $caption );
    return $caption;
}
Improve this answer
9
  • Any particular reason for the downvote?
    – shea
    Dec 3, 2012 at 20:04
  • Mr. Bunge, I have no idea why people do this. Thanks for trying to help anyways! I still don't know how to do this - I'm one of those graphic designer types just getting into code.
    – scottdaris
    Dec 4, 2012 at 1:51
  • Install the Code Snippets plugin and, after activation, visit the Snippets > Add New menu. Enter the above code into the code textarea and name the snippet. After adding the snippet, visit the Snippets > Manage Snippets menu to activate the snippet. Once these steps have been completed there will be an additional class on wp-caption (my_new_class).
    – shea
    Dec 4, 2012 at 2:46
  • If you're designing a theme, you can also create a file in the theme directory called functions.php and paste this code into it. (Remember to add a <?php tag to the start of the file)
    – shea
    Dec 4, 2012 at 2:47
  • OK, I know why people downvoted your answer. On the first line of add_action, your newly named function is called 'wpse_74735_replace_img_shortcodes' yet when that function is called it is misnamed as 'wpse_74735_replace_wp_caption_shortcode'. Also I noticed one more thing (you learn SO much from stuff that breaks!). The following line: 'class="wp-caption my_new_class' should have a space at the end so the newly named class name doesn't run into the next class as one long class name. But after these fixes, it works. Thanks for making me learn some new stuff by your mistakes :D
    – scottdaris
    Dec 4, 2012 at 8:02
0

In wordpress 4.9 you can write your class in the align attribute. I've added full-width to the caption like this. 

[caption id="attachment_11537" align="aligncenter full-width" width="1170"]<img src="http://pappmaskin.no/wp-content/2016/03/IMG_5199-1920x712.png" alt="" width="1170" height="434" class="size-large wp-image-11537" /> Fem øl takk[/caption]

The output (with jetpack photon turned on):

<figure id="attachment_11537" style="max-width: 1170px" class="wp-caption aligncenter full-width"><img data-attachment-id="11537" data-permalink="http://pappmaskin.no/?attachment_id=11537" data-orig-file="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?fit=7723%2C2863" data-orig-size="7723,2863" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Illustrasjon: Morten Skogly" data-image-description="" data-medium-file="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?fit=640%2C237" data-large-file="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?fit=1170%2C434" src="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=1170%2C434" alt="" class="size-large wp-image-11537" srcset="https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=1920%2C712 1920w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=310%2C115 310w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=640%2C237 640w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?resize=768%2C285 768w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?w=2340 2340w, https://i0.wp.com/pappmaskin.no/wp-content/2016/03/IMG_5199.png?w=3510 3510w" sizes="(max-width: 1170px) 100vw, 1170px" width="684" height="254"><figcaption class="wp-caption-text">Fem øl takk</figcaption></figure>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.