Update: WordPress added basic html support for captions in WordPress 3.4, so…woohoo! The following tips are no longer relevant – provided you’ve upgraded to 3.4.
Sometimes you may need additional control over how WordPress displays image captions. For example, say you want to have specific text on each line of a caption, rather than allowing WordPress to wrap the text how it wants to.
Let’s say you want the caption to show a description of the image, along with date and location.
The image on the right shows how it would look if you just entered that info into the Caption field…
I separated the description, location and date, with a hyphen – to add a bit of ghetto formatting.
Now…if we add some simple html to the Caption field, we can get much nicer results for our image caption…
Formatted WordPress Image Caption w/ Line Breaks
As you can see, the caption is now neatly arranged into three separate lines – one for the description, one for the location and one for the date.
All I had to do was add <br> tags at the end of each bit of text I wanted on a separate line. For best results, you want to do this in the code view. Click on the HTML tab in the WordPress editor window and then search for the captioned image code you want to edit. Look for the line that begins with caption=, then add <br> tags as needed.
Example:
caption="View from the Mission Bay Yacht Club<br>San Diego, CA<br>April, 2012"
Keep in mind that WordPress has a tendency to strip out this type of code if you save the changes in the Visual Editor, so remember to edit this formatting in the HTML view.
Formatted WordPress Image Caption w/ Bold Text & Line Break
If we want to really go nuts, we could make one of the lines bold, as well.
Maybe I decide I only want two lines of text in the caption – keeping the location & date on the same line – but I want the second line bolded.
In this case, I’d add <strong></strong> tags to make San Diego, CA – April, 2012 appear in bold.
Example:
caption="View from the Mission Bay Yacht Club<br><strong>San Diego, CA - April, 2012</strong>"
Remember…if you later re-open the page using the Visual Editor – WordPress will likely strip out this formatting, so be aware! 🙂
Can I simply just say what a comfort to uncover
somebody who genuinely knows what they’re discussing on the web.
You definitely understand how to bring a problem to light and make
it important. More and more people have to look at
this and understand this side of your story. I can’t believe you aren’t more popular given that you surely possess
the gift.
Hi Craig. I dont see the caption comments on my text version of my gallery. Yet, the text is all in one string. How can I have breaks?
Thanks
Hi Priscila, did you include the line break tags?
Craig, amazing, it worked.
Craig,
Is there a way I can keep a string of words together in the same line regardless of the platform.
Let me explain…on the site the sentence is together but when I go to my mobile app the line is split and a word shows next to the photo (where it is blank space on the site)
Thanks
Some of my captions in WordPress are automatically coming out in italics. I want them in Roman. How do I fix this?
This is likely due to the theme you’re using forcing the italic. To amend this you’ll need to add a bit of custom css (Appearance > Customize > Additional CSS):
Hey There. I found your site using search. This is a well crafted really
article. I’ll be certain to bookmark it and come back to
read more of your
useful information. Thanks for the post. I’m going to be back 🙂