How to Add Text Over Featured Images in WordPress

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:

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.

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:

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.

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:

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.

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.

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.

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!

Colin Newcomer

Colin Newcomer

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.

Related Articles

Coupons

17 thoughts on “How to Add Text Over Featured Images in WordPress”

  1. Good post but wouldn’t it be better for SEO if you added text or html captions in images rather than text over images? Is the text over images readable by search engines?

    Reply
  2. Thanks for this, I was looking for something like this. I am trying to create a featured post just like ProBlog from magazine3. Will this work? Just like 2 large images above and 3 normal size at the bottom.

    Reply
  3. Thank you so much, this is so helpful.
    Is there a way to display an image/icon (that represents a category) over the featured image instead of the category name? So, for example, you would assign an icon to a category and each featured image from that category would have that icon over the thumbnail.
    Also, would there be a way to make it so that only the thumbnail would show the icon, but the other featured image sizes would not?
    Thanks!

    Reply
    • Great info. One question though: what WP file do I add the php snippets to? I’m clear on adding the CSS but not so much on the php.

      Thanks!

      Reply
  4. nice one admin, can you make it as a hover effect, like for example: You can see the thumbnails but if you put the mouse pointer on the thumbnails you can see the image and the title below like overlay sliding below the image? like friv(dot)com!

    Reply
  5. Thanks man. This is a good tut. One question (I’m quite new to all of this), where do I put the display post thumbnail and get the name of first category PHP? Do I just upload it as a new PHP file to my child theme or does it need to go in a specific PHP file?

    Many thanks,

    Naeem

    Reply
  6. Hello there, just became alert to your blog
    through Google, and found that it is truly informative.

    I am gonna watch out for brussels. I will appreciate if you continue this in future.
    Lots of people will be benefited from your writing. Cheers!

    Reply

Join the conversation!

THE #1 WORDPRESS THEME BUILDER

Create Your Own

Building beautiful WordPress websites has never been easier. Explore the visual drag & drop Theme Builder that does it all, and works on any theme. Coding skills needed: none.