Captions are a great way to provide context and additional information for blocks in your WordPress posts or pages. With the Gutenberg editor, you can style and personalize captions to align with your website’s design and enhance the visual appeal.
This tutorial will show you how to customize captions in the WordPress Gutenberg editor using CSS. Whether you want to change the caption text color, adjust the font size and family, text-align, or apply unique styles to the caption container, Gutenberg doesn’t give you the option to do that by default.
This tutorial will equip you with the knowledge to make your captions stand out. Let’s dive in and unlock the potential of customizing captions in the Gutenberg editor!
Steps to Customize Caption in WordPress Gutenberg Editor
Step 1: Add the Caption to the Block
First, you need to add any block that allows you to add a caption, such as an Image, Gallery, Video, Table, etc.
Go to the WordPress Gutenberg editor, then add your desired block and caption. In this example, we add the Image block.
Step 2: Add the Additional CSS
Once you add a caption to your block, we will add the CSS snippet to your WordPress site. But, before adding the CSS snippet, you must find out what CSS class selector of the block’s caption you’re using; each has a different CSS class selector depending on what blocks you want to customize the caption. Such as the Image, Gallery, Video, Table, and other blocks that allow you to add a caption. So. how to find the CSS class selector of the WordPress block caption?
- Determining the Class Selector of the Block’s Caption Element
First, you need to switch to the preview mode on your WordPress Gutenberg editor by clicking the Preview button.
To find out the name of the class selector of the block’s caption element, you can use the built-in Developer Tools of your web browser (nearly all web browsers have this feature). If you use Google Chrome, you can click the menu icon (three-dot icon) and select More Tools -> Developer Tools.
Once you’ve entered the Developers Tools window, click the arrow icon to inspect an element in your page (see the image below).
Next, point the cursor to the block’s caption element and click on it to determine the class selector.
As in the image above, once you click the block’s caption element, the CSS class selector appears on the right screen area. For the Image block, the CSS class selector is ".wp-block-image figcaption“. You can copy that CSS class selector; we will use it later.
- Adding the CSS Snippet
Once you’ve recognized the CSS class selector of the block’s caption element you’re using, we will next write the simple CSS snippet on the Additional CSS input field.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS.
Note: If you’re using a block theme, click here to learn how to enable Theme Customizer on your WordPress.
If you want to customize the caption on the Image block (as we are using), copy the CSS snippet below and paste it into the Additional CSS input field. But, if you have different blocks, you must first replace the class selector.
.wp-block-image figcaption {
color: #cc0000;
font-size: 20px;
font-family: inherit;
text-align: center;
font-weight: 700;
margin-bottom: 1.5em;
margin-top: 0.5em;
}
The Code Explanation:
The provided CSS code targets the caption element “figcaption” within the Gutenberg Image block “.wp-block-image” and applies various styling properties.
By modifying these CSS properties and values, you can customize the appearance of captions within Gutenberg image blocks to match your desired design and styling requirements.
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
That’s it. If you’re happy with the result (as in the image above), you can keep it like this and save or publish your project if you want to. But, if you modify your block’s caption appearance, such as the text color, font size, font family, etc., you can edit the property values on the CSS snippet.
The Bottom Line
In conclusion, the WordPress Gutenberg editor’s customizable captions offer a strong and adaptable solution to improve the aesthetic attractiveness and accessibility of your content. Following the step-by-step instructions in this tutorial article, you can easily modify and style captions to suit your specific design preference.
Explore the possibilities of customizing captions in Gutenberg to elevate the overall user experience and make your content stand out. We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.
