Home ยป Tech ยป WordPress Figure (Image) Caption Text Size

WordPress Figure (Image) Caption Text Size

It’s time for graphics and our theme had no option to set the caption text size to differentiate it from the main text in our posts. So we did a Google search for “image caption text size” and found different CSS code snippets. These were applied as “Additional CSS” in the Appearance > Customise window. We tried several variants, none of which worked.

Attempt 1Attempt 2Attempt 3
.wp-caption-text {
font-size: 8px;
}


div.figure {
font-style: italic;
font-size: smaller;
text-indent: 0;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
Failed attempts (on the brink of frustration-induced destructive rage once more)

Fortunately, we checked the HTML for clues to narrow the keyword search. While WordPress inserts the figures as “Image” blocks (in Gutenberg), the HTML calls them “Figure”. Within, we noted <figcaption>…</figcaption> tags. BingoThe ever reliable Stack Overflow.

#content figcaption {
border: 1px solid blue;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-shadow: none;
color: black;
text-align: center;
height: auto;
word-wrap: break-word;
width:300px;

There were more configuration options than we required – handy to know.

As of this post: WordPress 5.4.2


Advertisement

Scroll to Top