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.

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.

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.