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.
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.
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! 🙂