How to Hide the Featured Image on a WordPress Post

A common question is: how do I hide or remove the featured image on a WordPress post.

It’s relatively easy to hide the featured image if you don’t want it displayed. You can even get fine-grained control over which posts or categories will hide the image.

There are several methods available:

• CSS code (to hide, but not remove the featured image).
• PHP Snippet
• Use a Plugin
• Use a theme – some themes like GeneratePress, Astra, and Genesis let you show or hide the featured image on a per-post basis.

Why hide the featured image?

There are a several reasons you might want to disable the featured image on all (or specific) WordPress Posts.

1. Content Type: Maybe a featured image doesn’t fit the content of the post, for example a list of coupons, a glossary, or an FAQ.
2. More text above the fold – Featured images take up space. If you want to make sure your visitor reads the first few paragraphs of your content, removing the post image will push it higher up above the fold.
3. Theme uses 1st image as featured – Some themes automatically take the first image inserted in the post and use it in place of a featured image, so there’s no reason to insert it a second time.
4. You want text above your first image – Lots of conversion-focused bloggers want readers to see text above the fold, especially on mobile. By removing the featured image from the top of the post, you can insert it after the first few paragraphs to decrease your bounce rate.

Hide the Featured Image with CSS

• Pros: Easy, fast. No risk of white screen of death.
• Cons: Image still loaded (not displayed) by WordPress. Slight speed hit.

This method works great if you aren’t obsessed with page speed, or you’re only removing the image on a handful of pages (and you don’t want to waste time messing with PHP).

1. Find the featured image class

To write our rule, we need the class your theme or plugin adds to all featured images.

To do that, you can use the ‘inspector tools’ built into your browser. Simply navigate to a post with a featured image, right-click and choose inspect.

You can then look at the html source to find the class-name assigned to your featured images. For example, on wpsuperstars.net, the Astra theme uses the .wp-post-image class.

2. Write your CSS rule

So we can write our CSS rule. This rule below would remove all featured images from all posts:

.wp-post-image {
    display: none;
}Code language: CSS (css)

But you can also make it much more targeted. WordPress adds body classes for each category and even individual post IDs.

/* Remove featured image from the 'Books' category */

.category-books .wp-post-image {
    display: none;
}

/* Remove the featured image from a specific post */

.post-1523 .wp-post-image {
    display: none;
}Code language: CSS (css)

Hide the featured image with a plugin

I prefer to use a plugin to control featured images on a per-post basis, rather than messing with PHP. Not only is it easier, but you don’t risk the ‘white screen of death‘ if you forget a semicolon.

The best free plugin I’ve found is Conditionally Display Featured Image. This should work for any theme that uses WordPress’s core functions to display the featured image.

You’ll get a little checkbox to disable the image on individual posts. It works with both Gutenberg and the classic editor.

Note: If you’re using the Genesis Framework, try this plugin instead.

Use a Theme that gives you control

Many of the most popular WordPress themes give you full control.

Here are some examples of themes that let you disable featured images on a site-level or post-level basis:

• Generatepress
• Astra
• KadenceWP
• Hello Theme
• Beaver Builder Theme
• Genesis
• X Theme
• Avada

Hide it with PHP

I put this method last because:

• It’s the most likely to break something on your site
• The PHP required may be different for some themes

Where to put your PHP code

Most tutorials recommend you add custom PHP to the functions.php file of your theme or child theme.

There are several options I think are better:

• Custom PHP functionality of your theme: GeneratePress and Astra both have a ‘hooks’ feature that lets you add custom PHP, including conditionals.
• Code Snippets Plugin: Code Snippets is a great free plugin to add custom HTML, Javascript and PHP to your site. It can even limit the risk of breaking your site from invalid php.
• Custom Functionality Plugin: Instead of tying custom PHP to your theme, hook it in with a simple plugin wrapper. Here’s how.

Write your PHP Function

Here’s an example function, which filters the post thumbnail html, and returns an empty string if it’s a post. You could also add a conditional for a specific category or custom post type if you wanted.

function we_remove_post_image( $html, $post_id, $post_image_id ) {
	if(is_single()) {
		return '';
	} else
	
	return $html;
}
add_filter( 'post_thumbnail_html', 'we_remove_post_image', 10, 3 );Code language: PHP (php)

Summary

There are several methods available to remove (or hide) the featured image on WordPress posts.

If you want to hide them on may posts, use a plugin or your theme’s functionality.

To hide the post image on just a few posts, or a specific category, again try using your Theme’s functionality first. If your theme doesn’t have this ability, this simple CSS code is a good backup option.

Recommended Themes:

• Generatepress (Pro)
• Astra (Pro)
• Neve

Plugins to hide the featured image:

• Conditionally display featured image on singular posts and pages