Looking to add text over featured images on your WordPress site?
Adding a text caption to featured images lets you add some context to your posts. But, if your WordPress theme doesn’t come with a built-in feature for this, it can be hard to set up.
Thankfully, there are some easy ways to add text over featured images in WordPress without resorting to custom code, and I’m going to share them with you in this post.
In total, I’ll show you four different methods:
- Two different free plugins that let you add captions to featured images
- A native block in the WordPress block editor
- Elementor and Elementor Pro
Ready to get started? Let’s dig in…
First – Check If Your Theme Supports Featured Image Captions
Before I get into the other methods to add text over featured images in WordPress, it’s worth checking if your theme already supports featured image captions.
For example, when I test with the new Twenty Twenty default theme, the theme will automatically display the caption that I set in the WordPress Media Library:
For reference, this is how I set the caption:
So if your theme supports it, that’s an easy way to add captions to featured images.
However, not all themes support this. When I tested the exact same thing in last year’s default theme (Twenty Nineteen), it didn’t display the caption.
If your theme doesn’t display the caption by default, you can keep reading for some other ways to add text over featured images in WordPress.
How to Add Text to Featured Images With Featured Image Caption
Featured Image Caption is a neat free plugin that lets you add a caption to your WordPress featured images, much like you can add captions to images that you include in your content.
It’s super easy to use and it works with most WordPress themes right out of the box. It also works with both the classic editor and the new block editor
To get started, install and activate the free Featured Image Caption plugin from WordPress.org.
Once you’ve activated the plugin, you’ll see a new Featured Image Caption section in the WordPress editor. In the block editor, this section appears in the sidebar.
All you need to do is add the text that you want to use to the box:
And that’s it! The plugin will automatically add the text caption to your featured image.
By default, the text appears immediately below your featured image:
If you want to move this text to make it “float” over the image, you can use some simple CSS.
While I’m not a CSS expert (there might be a more efficient way to do this!), here’s the CSS I used. I also changed the text size and color:
span.ccfic-text {
position: relative;
bottom: 50px;
color: white;
font-size: 32px;
}
If you’re not sure how to add CSS, check out our guide on how to add custom CSS to WordPress.
How to Add Text to a Featured Image With the Cover Block
If you’re using the new WordPress block editor (AKA Gutenberg), you can add a featured image with text using the default blocks.
While the block editor includes multiple options for adding text over images, I recommend the native Cover block for featured images. You can also make it full-width to add a nice featured effect:
And voila – a featured image with text over it:
If your theme automatically displays the featured image on the single page, you might want to disable that to avoid duplicate images because the Cover block is technically separate from your featured image, even though it accomplishes the same thing.
How to Add Text Over a Featured Image With FSM Custom Featured Image Caption
FSM Custom Featured Image Caption is another neat free plugin at WordPress.org that makes it easy to add a caption to a featured image in WordPress, along with some other helpful settings.
This one comes with a few more options than the Featured Image Caption plugin above.
To get started, install and activate the free plugin from WordPress.org.
Then, go to Settings → FSM Custom Featured Image Caption to configure a few settings.
First, if you want to show your featured image caption in the blog post list, you should check the box to Show image captions in lists. Otherwise, the plugin will only display the caption on single blog post pages.
If you want to make the text “float” over the featured image, you can also choose the Custom Style option and enter some custom CSS. For example:
position: relative; bottom: 50px; left: 35px; color: white; font-size: 22px;
The plugin automatically pulls your caption from the caption that you set in the WordPress Media Library.
Here’s what the caption looks like with the default styling and the Twenty Fifteen theme:
And here’s what it looks like when I add the custom CSS from above to make the text float over the image:
How to Add Featured Text Over Images With Elementor
Finally, if you want a more complete overhaul to how you display both posts and featured images, you can use the Elementor page builder.
Elementor Pro lets you create a custom template for your blog posts using its Theme Builder feature. As part of this, you can overlay text over your featured images.
For more on the basics of how to use Elementor, check out our full Elementor review.
To set this up, you’ll need both the free core Elementor plugin and the Elementor Pro add-on so that you can get access to the Theme Builder feature.
Then, go to Templates → Theme Builder and create a new Single template for your Posts. This controls the design of individual blog posts.
To add the featured image, drag over a Featured Image widget. Then, to add text, use the Caption drop-down and set it to either:
- Attachment Caption – it will pull the caption from the WordPress Media Library caption box.
- Custom Caption – you can enter a custom caption. If you combine this with Elementor Pro’s Dynamic feature, you can automatically insert a caption from a custom field that you’re using.
I know there’s a lot going on here. So if you’re confused by Elementor, I really do recommend reading through our full Elementor review so that you get a better understanding of how Elementor works.
Any Questions About Adding Text Over Featured Images?
There you have it, folks. Four different ways that you can add text over your WordPress site’s featured images.
For the absolute simplest method, you can just use a Cover block in the new WordPress block editor.
Or, the Featured Image Caption and FSM Custom Featured Image Caption plugins are both simple free options.
On the other hand, if you want more control over exactly how your WordPress featured images function, you might be happier with Elementor and Elementor Pro.
Any lingering questions about how to add text over featured images on your WordPress site? Ask away in the comments and we’ll try to help!
Keep reading the article at Learn WordPress with WPLift. The article was originally written by Colin Newcomer on 2020-02-14 06:00:31.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.