Add Multi-line Captions to WordPress Galleries

Share this on:

You can add multi-line captions to your native WordPress galleries. This is especially useful if you are using the gallery for a staff page. For instance, you may want to have a name, position, and email address below each image, and with each of these on their own line.

multi line caption in WordPress gallery image


I’m using the Twenty Twelve theme to demonstrate (with default content) because it’s easier to see the gallery captions. For the Twenty Thirteen and Twenty Fourteen themes, you hover over the gallery images for captions, so it’s more difficult to see, but you can still add a multi-line caption.

I also edited the gallery to use medium size images and two images across, instead of 3. You can read how to use larger images in your gallery, if you like. Here you can see that the caption on the left is still run together, but there are multiple lines for the caption on the right.

Edit or Add Image Captions to Your Gallery

add multi line caption in WordPress gallery image

When you add your gallery to a post or page, you can add a caption to each image in the Attachment Details section. You can also edit the captions of each image in the Edit Gallery screen.

  1. Go to edit your post or page.
  2. Click on the gallery that you want to edit.
  3. Click on the pencil icon to get to the Edit Gallery screen.
  4. Then click on one of the image.
  5. In the right sidebar, you will see Attachment Details and Caption.
  6. In the Caption section, add your caption, but press Enter on your keyboard where you want the new lines.
  7. You can see an example in the image.
  8. Click the blue Update Gallery button.
  9. Then click the blue Update button for your post.

For images that you want the text all run together, be sure not to press Enter on your keyboard. Now when you are finished and view your gallery page, you will still see the caption text all run together. But you’re not finished yet!

Edit Your Styles.css

You will need to edit your style.css in a text editor or add the styles to Appearance > Customize > Additional CSS. The newer WordPress default themes and the Genesis child themes use the selector .wp-caption-text to style the image captions, and most other themes use this, as well.

For Twenty Twelve, you could find this block of CSS in style.css, and add to it.

.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	font-style: italic;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #757575;
}

For multi-line captions, you would add white-space: pre-line;
That’s the line that does the magic. It also adds white-space between the image and the caption, so if you want to remove the added white space, you can remove it by adding some negative margin.

For Twenty Twelve, you would have:

.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	font-style: italic;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #757575;
	white-space: pre-line;
	margin-top: -18px; /* optional */
}

For a Genesis Sample theme, you would edit and add to:

.wp-caption-text {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	white-space: pre-line;
	margin-top: -18px; /* optional */
}

If you just wanted to add to your Additional CSS, add:

.wp-caption-text {
	white-space: pre-line;
	margin-top: -18px; /* optional */
}

And there you have multi-line captions for your WordPress galleries in just a few easy steps.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

10 responses to “Add Multi-line Captions to WordPress Galleries”

  1. David Honan Avatar
    David Honan

    This is a great tip!
    I have one problem though, I added the margin-top: -18px; as suggested so that the caption would not be too far below the gallery thumbnail; however it caused all non-gallery images to have their captions move up and overlap the thumbnail image.
    Is there a way around this?
    I am using a theme called raindrops.
    I added :
    .wp-caption-text {
    white-space: pre-line;
    margin-top: -18px; /* optional */
    }

    thanks again
    david

    1. Marcy Diaz Avatar

      I’m glad it’s helpful, David.

      To just target all the gallery captions, you would use
      .gallery .wp-caption-text
      instead of just .wp-caption-text

  2. Mazin Sami Avatar
    Mazin Sami

    Hello Marcy

    I created a website using “Beaver Builder” and my customer now wants to put the titles for his artwork in in the plug-in gallery in 3 line, I’m not sure if you’re familiar with the BB plug-in. But I would appreciate your help. I saw your solutions on this page, but I’m when it comes to which file I need add the code to.

    Thank in advance for your help :)

    1. Marcy Diaz Avatar

      You’re welcome, Mazim. If you just use the WordPress built-in gallery per this post, you can add your client’s artwork titles to the Caption field for each image in the gallery. You can see a website that does this:
      I don’t think Beaver Builder will affect that; you can ask on their forums; they have fantastic support.

  3. Amy Avatar
    Amy

    Hi Marcy

    Great info!

    I also would like to add a ‘SALE’ button to the pictures in my gallery as I’m using it for a shop, would you know of any apps that allow me to do that?

    Thank you!
    Amy

    1. Marcy Diaz Avatar

      That’s not something that can be added to the caption.

  4. Marcy Diaz Avatar

    Your theme caption selector is .fl-photo-caption. You will need to apply the styles to that; you may also need to remove some other styles that your theme has.

  5. Alex Avatar

    Great help, Thank you

    I can now list my contact details on my website but just wondered if I can turn my email address into a link for users to click on to email me instantly?

    It doesn’t seem to let me use “mailto:”

    1. Marcy Diaz Avatar

      Hi. The captions should allow a link and even a “mailto:” link. Try again.

      1. Alex Avatar
        Alex

        Hi, thankyou for responding so quick!

        I can add links to individual photo captions however when I can’t seem to do it with gallery captions.

        Please could you advise me on how to do this,

        Many thanks in advance

        Alex

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.