Add Multi-line Captions to WordPress Galleries

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


Comments

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

  1. David Honan says:

    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

  2. Mazin Sami says:

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

  3. Amy says:

    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

  4. Lee Wagnall says:

    Hi Marcy, despite editing the style.css file I cannot get this to work with the zerif lite template. Have added the two lines but still the caption is on a single line. The site page affected is. http://www.oldedsgolf.co.uk/winners-gallery/

    I am new to WP so apologies if I have made a novice error.

    • Marcy Diaz says:

      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 says:

    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:”

    • Marcy Diaz says:

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

      • Alex says:

        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 *