Mission Bay, San Diego

Adding a Line Break or Bold Text in a WordPress Image Caption

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.

Mission Bay Yacht Club - Mission Bay, San Diego, CA
View from the Mission Bay Yacht Club – San Diego, CA – April, 2012

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

Mission Bay Yacht Club - Mission Bay, San Diego, CA
View from the Mission Bay Yacht Club
San Diego, CA
April, 2012

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

Mission Bay Yacht Club - Mission Bay, San Diego, CA
View from the Mission Bay Yacht Club
San Diego, CA – April, 2012

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

7 thoughts on “Adding a Line Break or Bold Text in a WordPress Image Caption”

  1. 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.

  2. 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

  3. 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

  4. 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):

    .wp-caption {font-style: normal;}

Leave a Comment

Your email address will not be published. Required fields are marked *