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.
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
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.
- Go to edit your post or page.
- Click on the gallery that you want to edit.
- Click on the pencil icon to get to the Edit Gallery screen.
- Then click on one of the image.
- In the right sidebar, you will see Attachment Details and Caption.
- In the Caption section, add your caption, but press Enter on your keyboard where you want the new lines.
- You can see an example in the image.
- Click the blue Update Gallery button.
- 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.
10 responses to “Add Multi-line Captions to WordPress Galleries”
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
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
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 :)
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.
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
That’s not something that can be added to the caption.
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.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:”
Hi. The captions should allow a link and even a “mailto:” link. Try again.
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