Two different styles for [caption]

It’s a request that comes up, a lack of being able to style wp-caption-text more specifically for image A vs image B.

Try this manual solution: Add images to your posts via the visual editor. Then switch to the HTML view and locate the inserted image that you want to have the different styled caption and add a CSS class to that image.

On my Crash Test Dummy installation I added the class credits-caption.

[caption id="attachment_4440" align="aligncenter" width="199" caption="More text."]<a href="https://wordpress-url/wp-content/uploads/2012/03/29850001.jpg"><img class="size-medium wp-image-4440" title="29850001" src="https://wordpress-url/wp-content/uploads/2012/03/29850001-199x300.jpg" alt="" width="199" height="300" /></a>[/caption]

becomes

[caption id="attachment_4440" align="aligncenter" width="199" caption="More text."]<a href="https://wordpress-url/wp-content/uploads/2012/03/29850001.jpg"><img class="size-medium wp-image-4440 credits-caption" title="29850001" src="https://wordpress-url/wp-content/uploads/2012/03/29850001-199x300.jpg" alt="" width="199" height="300" /></a>[/caption]

With a little CSS in your child theme, that additional credits-caption class should let you style that anyway you’d like.

Thank you for your reply and I probably better place my codes here. Unfortunately I’m not an experienced programmer, but I’m trying.

Here the CSS in which I have already included a credits-caption coding as I think it may be right.

.wp-caption { background:#F7F7F7; text-align:center; padding:4px 0px 5px 0px; border:1px solid #e6e6e6; }
.wp-caption img { margin:0px 0px 5px 0px; padding:0px; border:0px; }
.wp-caption p.wp-caption-text { margin:0px; padding:0px; font-size:11px; font-weight:normal; line-height:12px; }
.credits-caption { background:#F7F7F7; text-align:right; padding:2px 0px 5px 0px; border:none; }
.credits-caption img { margin:0px 0px 5px 0px; padding:0px; border:0px; }
.credits-caption p.wp-caption-text { margin:0px; padding:0px; font-size:8px; font-weight:italic; line-height:10px; }

This is the image file produced by WordPress when inserting an image:

[caption id="attachment_1079" align="alignright" width="200" caption="by Jason Stitt (<a href='https://www.shutterstock.com/pic.mhtml?id=17170573' target='_blank' rel='nofollow'>Shutterstock</a>)"]<img src="https://www.soccerwidow.com/wp-content/uploads/2012/04/shutterstock_17170573-200x300.jpg" alt="" title="Sexy soccer referee" width="200" height="300" class="size-medium wp-image-1079 " />[/caption]

I added the class=”credits-caption” in img as advised. Here the code:

[caption id="attachment_1079" align="alignright" width="200" caption="by Jason Stitt (<a href='https://www.shutterstock.com/pic.mhtml?id=17170573' target='_blank' rel='nofollow'>Shutterstock</a>)"]<img class="credits-caption" src="https://www.soccerwidow.com/wp-content/uploads/2012/04/shutterstock_17170573-200x300.jpg" alt="" title="Sexy soccer referee" width="200" height="300" class="size-medium wp-image-1079 credits-caption" />[/caption]

However, no changes happen on the screen. Thanks for further advice ??

Ah, I see what I did wrong. The class is applied to the img tag but to get it working correctly, should be applied to the div with id="attachment_1079".

That is, I think that’s it. My CSS is very poor. ??

Shortcode work, that sounds interesting… there’s probably an easier way to do it but later on when it’s raining I’ll play with add_filter() and/or add_shortcode() and see if I can come up with a solution.

Did as advised:

[caption id="attachment_1079 credits-caption" align="alignright" width="200" caption="by Jason Stitt (<a href='https://www.shutterstock.com/pic.mhtml?id=17170573' target='_blank' rel='nofollow'>Shutterstock</a>)"]<img class="credits-caption" src="https://www.soccerwidow.com/wp-content/uploads/2012/04/shutterstock_17170573-200x300.jpg" alt="" title="Sexy soccer referee" width="200" height="300" class="size-medium wp-image-1079" />[/caption]

Still not working ??

Yes, I know. That’s not what I was advising.

The class needs to be put into the output of the caption shortcode. That needs a filter or a new shortcode handler.

Adding it that way won’t work (as you’ve found out) and just as an exercise I want to play with the code as a plugin. Which also means I may not find a solution at all. ??

But I haven’t tried yet and there may already be a plugin available that does what you want.

https://www.ads-software.com/extend/plugins/

Okay, this works but it’s an inelegant hack.

I tried to add another attribute to the [caption] shortcode but when I switched to the Visual Editor my new attribute was munged into the caption.

So after reading Justin Tadlock’s post I made this plugin instead.

https://pastebin.com/gViaq604

Download that to your PC as caption-class.php (change the name from caption-class.php.txt and remove the .txt) and upload that via FTP or whatever tools your wp-content/plugins directory.

Activate the new plugin Add credit-class to image captions.

Now in the visual editor select an image with a caption and add this text to the caption.

:credits-caption:

It doesn’t matter if you add that to the start or end. With the plugin active that text will not be displayed.

What will happen is that this plugin will output the additional CSS class credits-caption right after class="wp-caption and that will let you style that image caption differently.

Perfect solution, Jan! I wanted to do the exact same thing and now with your coding skills, I can! Thanks again!