How to Add Caption to Images in WordPress

Images can transform a plain block of text into an engaging, visually rich experience — but without context, even the best images lose impact. Adding a caption provides that context, improves accessibility, and can even support your search engine optimization (SEO) efforts. In this guide, you will learn several ways to add a caption to images in WordPress using the Block Editor (Gutenberg), the Media Library, Classic Editor, and a bit of custom code for more advanced layouts.

Why Image Captions Matter

Before jumping into the “how,” it’s worth understanding why adding a caption to images in WordPress is a best practice for both usability and SEO.

• Improved readability: Captions help readers quickly understand what an image represents, especially when scanning content.
• Stronger storytelling: A descriptive caption can add context, clarify data in screenshots or charts, and support your main message.
• Better accessibility: While captions are not the same as alt text, they do provide additional information that can help users with cognitive or visual impairments.
• SEO benefits: Search engines analyze surrounding text to understand images; well-written captions can reinforce topic relevance and keyword context.
• Professional appearance: Consistent captions signal attention to detail and help create a polished layout across posts and pages.

How to Add a Caption to Images Using the Block Editor (Gutenberg)

The Block Editor is the default editor in modern WordPress installations and offers the most user-friendly way to handle captions.

Step 1: Add an Image Block

To get started, insert an image into your content using the Image block:

• Click the + button where you want to place your image.
• Select Image from the list of common blocks (or search for “Image”).
• Upload a file, choose from the Media Library, or insert from a URL.

Once the image is added, you will see it appear directly in the editor.

Step 2: Enter a Caption Below the Image

When you select the image in the editor, a small field labeled “Write caption…” appears just below it.

• Click inside the caption field under the image.
• Type your caption text. This can be a simple description, attribution, or additional context.
• Click outside the block or press Enter to save the caption.

The caption is stored along with the image in your content and will be displayed on the front end wrapped in a semantic HTML <figcaption> element.

Step 3: Adjust Alignment and Width

Captions typically follow the alignment of the image. When you select an image block, you can:

• Choose Align left, Align center, or Align right for simple placement.
• Use Wide width or Full width if your theme supports it, which gives both the image and caption more visual prominence.

These alignment options affect both the image and its caption together, maintaining a consistent layout.

Example: A Captioned Image in the Block Editor

Imagine you’ve added a screenshot of your WordPress dashboard to a tutorial. A simple yet useful caption might look like this:

• Caption example: “The main dashboard screen where you manage posts, pages, and site settings.”

By including that contextual text, readers instantly know what they’re seeing and how it relates to your instructions.

Adding Captions via the Media Library

Sometimes you want to assign a caption once and then reuse it across multiple posts. You can do this inside the Media Library so that every time you insert that image, its caption is already prepared.

Step 1: Open the Media Library

• In the WordPress admin, go to Media > Library.
• Switch to List View or Grid View, depending on your preference.

Step 2: Edit the Attachment Details

• Click on the image you want to edit.
• A sidebar or modal window will appear with attachment details.
• Locate the Caption field.

Below it, you will also see fields such as Title, Alt Text, and Description, which serve different purposes.

Step 3: Add and Save the Caption

• Type your desired caption into the Caption field.
• Click Save, Update, or simply close the modal, depending on your WordPress version.

Now, when you insert this image using the Image block and choose it from the Media Library, WordPress will automatically populate the caption below the image in your content. You can still edit or override it later inside a specific post or page.

Using Captions with Gallery Blocks

The Gallery block lets you display multiple images in a grid layout. Each image in a gallery can have its own caption, which is useful for portfolios, product showcases, or image-heavy blog posts.

Step 1: Insert a Gallery Block

• Click the + button where you want your gallery.
• Search for and select the Gallery block (or “Image Gallery” in some setups).
• Upload or choose several images from the Media Library.

Step 2: Add Captions to Individual Images

Once the gallery is created:

• Click each individual image within the gallery.
• Under each image, look for the “Write caption…” field.
• Type your caption for each image as needed.

These captions appear beneath each thumbnail in the gallery when viewed on the front end, and they are also structured with proper HTML for better accessibility and SEO.

Editing Existing Gallery Captions

• Select the gallery block in your post or page.
• Click the image whose caption you want to update.
• Edit the text in the caption field and update your content.

This approach keeps your image groups organized and consistently captioned, which is especially important for visual portfolios.

How to Add Image Captions in the Classic Editor

If you’re still using the Classic Editor plugin or an older WordPress installation, the process is slightly different but still straightforward.

Step 1: Insert an Image

• Place your cursor where you want the image.
• Click the Add Media button above the toolbar.
• Select an image from the Media Library or upload a new one.

Step 2: Add a Caption in the Attachment Details

• On the right-hand side (in the “Attachment Details” panel), locate the Caption field.
• Enter your caption text.
• Click Insert into post.

The Classic Editor wraps the image and caption in a shortcode-like structure, usually something similar to a <div> with a <p> for the caption, depending on your theme and version. When viewed on the front end, the caption sits directly below the image.

Editing Captions in the Classic Editor

• Click once on the image inside the editor.
• Click the pencil icon (Edit) that appears.
• Update the caption field in the popup dialog.
• Click Update to save your changes.

This makes it easy to adjust captions without manually touching any HTML.

Best Practices for Writing Effective Image Captions

Knowing where to add a caption is only half the battle. How you write it can influence user engagement and search visibility.

• Be descriptive but concise: Aim for one or two short sentences that clearly explain the image’s purpose.
• Use natural language: Avoid keyword stuffing; instead, write captions that sound like they belong in the conversation.
• Include relevant keywords where appropriate: If your image directly relates to your main topic or key phrase, it’s fine to mention it naturally in the caption.
• Provide attribution when needed: If you’re using stock images or third-party media, add credit in the caption following the license requirements.
• Don’t duplicate alt text: Alt text is for screen readers and search engines; captions are user-facing. Make them complementary rather than identical.
• Maintain consistency: Use a similar style, length, and tone across all captions to keep your brand voice cohesive.

Accessibility Considerations: Captions vs Alt Text

Captions and alt text often get confused, but they serve different roles and should both be used correctly.

• Alt text (alternative text) is hidden from sighted users and is read by screen readers. It describes the image for users who cannot see it and helps search engines index the image.
• Captions are visible to everyone under the image and add contextual or complementary information.

In the editor:

• Use the Alt Text field for accessibility and SEO.
• Use the Caption field for visible, human-readable context.

Together, they create a more inclusive and informative experience for all users.

Styling Image Captions with CSS

Most modern themes provide basic styles for captions, but you might want to customize their appearance. You can do this with a small amount of CSS added via the Customizer or a child theme.

Where to Add Custom CSS

• Go to Appearance > Customize.
• Open the Additional CSS section.
• Paste your CSS rules and publish.

Common Caption Styling Examples

Here are a few CSS snippets you can adapt. Note that Gutenberg typically wraps images with captions inside a figure tag and uses figcaption for the caption itself.

figure.wp-block-image figcaption {
  font-size: 0.9em;
  color: #666;
  text-align: center;
  margin-top: 0.5em;
}

To add a subtle border or background behind captions:

figure.wp-block-image {
  border: 1px solid #e0e0e0;
  padding: 0.5em;
}

figure.wp-block-image figcaption {
  background-color: #f9f9f9;
  padding: 0.5em;
}

Always test your changes on multiple devices to ensure your captions remain legible and do not break the layout.

Common Issues and How to Fix Them

Occasionally, adding a caption can reveal theme or plugin conflicts. Here are typical problems and solutions.

Caption Not Displaying on the Front End

• Check the block: Ensure you actually entered text into the caption field under the image in the editor.
• Try a default theme: Temporarily switch to a default theme like Twenty Twenty-Four to see if the issue is theme-related.
• Disable plugins: Deactivate plugins that modify images or content layout to identify conflicts.

Caption Styling Looks Broken

• Inspect the element: Use your browser’s developer tools to see which CSS rules are applied to figure and figcaption.
• Override with CSS: Add your own rules in Additional CSS to correct font size, color, or spacing.
• Check for page builder interference: Some builders wrap images in extra containers that can affect caption styling.

Captions Not Centered Under Images

• Verify alignment: Set the image alignment to center in the block toolbar.
• Adjust CSS: Add text-align: center; to the figcaption or the parent figure if needed.

When to Use Captions (and When to Skip Them)

Not every image needs a caption. Using them strategically keeps your content clean and impactful.

Use Captions When:

• The image contains important information, such as charts, screenshots, or data visualizations.
• You need to attribute the source of the image.
• The image reinforces a key concept or step in a tutorial.
• The image could be misunderstood without extra context.

Skip Captions When:

• The image is purely decorative and doesn’t add meaning to the content.
• Adding a caption would repeat information already clearly explained in the surrounding text.
• You are working with design elements or background graphics that don’t need user-facing explanation.

This selective approach helps keep your posts readable and avoids unnecessary clutter.

Conclusion

Adding a caption to images in WordPress is a small, simple step that can dramatically improve readability, accessibility, and SEO. Whether you’re working in the Block Editor, the Media Library, or the Classic Editor, the process is fast and flexible. Combine clear, well-written captions with properly set alt text and thoughtful styling, and your images will do much more than decorate your posts — they will actively support your message and help your content perform better in search results.

As you update or create new posts, make it a habit to review each image: does it need a caption, what should it say, and how can it enhance the reader’s understanding? Over time, this attention to detail will give your site a more professional, user-friendly feel and contribute to a stronger overall content strategy.