Walker News

WordPress: Adds wp-caption-text To CSS File For Image Caption Styling

Question: Is there a WordPress plugin or alternative ways than editing wp-includes/media.php file if I want to format WordPress image caption text?

Answer: Yes. There are many ways to Rome, and editing WordPress core file is certainly not the only solution for this topic.
Indeed, it’s not a good practice to “hack” WordPress core files unless you don’t mind to keep track of mods that you’ve done and happily re-apply the mods during each WordPress upgrade processes.

In WordPress 2.6.1, the Add Media interface automatically enclose image caption in the paragraph tag with a CSS class that named as wp-caption-text (i.e. <p class="wp-caption-text"></p>).

So, the better way of formatting WordPress image caption text is by adding this CSS class (i.e. wp-caption-text) to style.css file of your active WordPress theme.

That’s to say, you might define superscripts CSS style in the wp-caption-text class, so that image caption text will appears in superscripts format. Otherwise, you could also specify a different font style, text colour, underline, etc, so long the image caption text appears differently than post body font style that you’re looking for.

For example, I try to use vertical-align:top; and font-size:xx-small; to achieve superscript style in CSS code as suggested by some references. All you need is to add this block of CSS class to style.css file in your WordPress theme directory:
.wp-caption-text {
        font-size:xx-small;
        color:#00F;font-weight:bold;
        vertical-align:top;
}

And, here are two samples of WalkerNews “trademark” that showing the difference of using HTML superscript tag and CSS superscript definition:

Using HTML superscripts and CSS style of superscripts to create WalkerNews trademark.
Using HTML superscripts and CSS style of superscripts to create WalkerNews trademark.

Personally, I prefer superscripts style that rendered with HTML <sup></sup> tag.

Custom Search

  1. eam 24-12-08@07:51

    I have been searching for this for my other sites! thanks very much for this helpful post. You came first on my Google search on the keyword. :-)

    May write something about it in the future -linking back to you to help more wordpress users like me! Happy holidays.

  2. Travis 18-08-09@09:08

    Thank you! This drove me crazy for two hours until I read your entry.

  3. canon5dshooter 13-09-09@03:52

    Thanks so much for this information! I finally was able to change the image captions on my blog. Now if I can only figure out how to change the comment box!

  4. Marc Shaw 15-10-09@23:14

    Hey, I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog!…..I”ll be checking in on a regularly now….Keep up the good work! :)

    – Marc Shaw

  5. Page 04-01-10@12:17

    THANK YOU!! Yeah, it’s a simple thing, but I had no idea what to do. Now my captions look less stupid ;-)

2014  •  Privacy Policy