WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Add Text Over Featured Images in WordPress

Last Updated on September 23rd, 2021

Published on February 14th, 2020

Tags:

Share This Article

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:

  • Elementor and Elementor Pro
  • Two different free plugins that let you add captions to featured images
  • A native block in the WordPress block editor

Ready to get started? Let’s dig in…

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.

Article Continues Below

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.
How to add caption over featured image with Elementor

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.

Go To Elementor

It’s always 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:

Featured image caption in Twenty Twenty WordPress theme

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.

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.

Article Continues Below

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:

How to add featured image caption

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:

Caption below 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;
}

WordPress featured image with text

If you’re not sure how to add CSS, check out our guide on how to add custom CSS to WordPress.

Article Continues Below

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:

How to add text over featured image with cover block

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.

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:

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!

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.