Hide The Featured Image In WordPress Post
There are several methods to hide the featured image in WordPress posts, including using a plugin or modifying your theme’s code. One popular method is to add CSS code to your theme’s style.css file or to the Additional CSS section in the WordPress Customizer. The CSS code typically targets the post’s featured image class and sets its display property to none. Alternatively, you can use a plugin that offers the option to hide the featured image in WordPress posts or site-wide.
Most people run into this problem for one of two reasons. Either the theme is pulling the featured image into both the archive listing and the top of the single post, creating an ugly duplicate, or the image was only ever meant to be used for social sharing and SEO thumbnails, not for display on the page itself. The right fix depends on which of those two situations applies, so it’s worth figuring that out before touching any code.
Method 1: Hiding the Featured Image With CSS
Here are the general steps to hide the featured image in WordPress posts using CSS code:
- Log in to your WordPress website and navigate to the Appearance > Customize section.
- Click on Additional CSS (or find the style.css file in your theme editor).
- Add the following CSS code to the editor:
.single-post .post-thumbnail {
display: none;
}
- Save your changes.
Note: The CSS code above targets the post-thumbnail class on single post pages. If you want to hide featured images on other pages, you’ll need to modify the CSS selector accordingly. Every theme names its featured image wrapper a little differently, so if the rule above does nothing, the fastest way to find the correct class is to right-click the image in your browser, choose Inspect, and look at the class names attached to the image or its parent container.
A few real examples of what that class name might actually be, depending on the theme:
- Twenty Twenty-Four and other default block themes:
.wp-block-post-featured-image - Astra:
.ast-featured-img - GeneratePress:
.featured-image - Many older themes built around get_the_post_thumbnail():
.post-thumbnailor.entry-thumbnail
If you only want the image hidden on the blog archive but visible on the single post (or the reverse), scope the selector accordingly: .blog .post-thumbnail for the archive only, or .single-post .post-thumbnail for individual posts only, exactly as shown in the example above.
Method 2: Hiding Featured Images With a Plugin
Here are some additional steps to hide featured images using a plugin:
- Log in to your WordPress website and go to the Plugins > Add New section.
- Search for a plugin that allows you to hide featured images, such as “Hide Featured Image” or “Disable Featured Image”.
- Install and activate the plugin of your choice.
- Navigate to the post or page where you want to hide the featured image.
- Look for a checkbox or button labeled “Hide Featured Image” or “Disable Featured Image” (the label may vary depending on the plugin you’re using).
- Check the box or click the button to hide the featured image on that post or page.
- Save your changes.
Note: If you want to hide featured images on multiple posts or pages at once, you may need to use a bulk editing tool or modify your theme’s code. A plugin-based approach is generally the safer choice for site owners who aren’t comfortable editing CSS, because it usually gives you a per-post toggle rather than a blanket rule that applies everywhere. The tradeoff is one more active plugin, which is a small maintenance cost but still worth weighing against a five-line CSS snippet that does the same job for free.
Method 3: Editing functions.php for a Permanent, Theme-Level Fix
If your goal is to remove the featured image from every single post display across the entire site, rather than hiding it selectively, a small function in your child theme’s functions.php file is often cleaner than either CSS or a plugin. This approach actually removes the image from the page rather than just hiding it visually, which is a meaningful difference for page speed since the browser never downloads the image at all.
A typical snippet, added to a child theme so it survives a theme update, looks something like this:
function remove_featured_image_display( $html ) {
if ( is_single() ) {
return ”;
}
return $html;
}
add_filter( ‘post_thumbnail_html’, ‘remove_featured_image_display’ );
This hooks into the post_thumbnail_html filter, which WordPress runs every time a theme calls the_post_thumbnail(). Swapping is_single() for is_home() or is_archive() changes where the image gets suppressed. This is a code-level change, so it should only be attempted by someone comfortable editing theme files, and always in a child theme rather than the parent, since editing the parent theme directly means the change gets wiped out the next time the theme updates.
What CSS Hiding Does Not Fix
Setting display: none on the image stops it from being visible, but the image file still loads in the background unless the theme is smart enough to lazy-load offscreen elements. For a single post that isn’t a big deal. For a blog archive showing twenty posts, each quietly loading a featured image nobody will ever see, that’s twenty unnecessary image requests weighing down the page. On a slow connection or a site already struggling with Core Web Vitals scores, that adds up. If page speed matters more than convenience, the functions.php method or a plugin that actually removes the markup is the better choice over a pure CSS rule.
It’s also worth remembering that the featured image usually does more than decorate the post. Social platforms and messaging apps pull the featured image (or the Open Graph image, which is often the same file) when someone shares the link. Hiding it visually on the page with CSS does not affect what shows up when the post is shared on Facebook, X, or in a Slack preview, since that pulls from the meta tags in the page’s head, not from what’s rendered in the body. If the intent is to also change the social preview image, that’s a separate setting, usually found in the SEO plugin (Yoast, Rank Math, or similar) under the post’s social sharing tab.
Hiding the Featured Image in Page Builders
Most of the CSS and functions.php advice above assumes a standard WordPress theme rendering the featured image through the normal template hierarchy. Page builders handle this differently, and the fix usually lives inside the builder’s own interface rather than in a separate stylesheet.
In Elementor, the featured image is often pulled in through the theme’s own template rather than an Elementor widget, especially on single post templates built with Elementor Theme Builder. If you built the single post template yourself in Theme Builder, look for the Featured Image widget in the layout and either delete it or set its visibility conditions to hide it on specific devices or post types. If the image is coming from the underlying theme template rather than Elementor, the CSS method described above still applies, since Elementor doesn’t override the theme’s own thumbnail markup unless you’ve explicitly built a custom template for it.
In Divi, the featured image on a blog post is typically controlled through the Blog module or the Post Content module settings, where there’s usually a direct toggle for “Show Featured Image” without needing any CSS at all. Checking the module settings first, before reaching for custom code, saves a lot of unnecessary troubleshooting in builder-based sites.
Full Site Editing themes built around the block editor add one more wrinkle. The featured image on these themes is usually rendered by a Featured Image block sitting inside a Post Template block, either in a template or a template part. To remove it site-wide, open Appearance > Editor, find the template rendering single posts, select the Featured Image block, and delete it directly from the block canvas. This achieves the same “actually removed, not just hidden” outcome as the functions.php method, without writing any code.
A Real Example: Before and After on Page Weight
To make the performance difference concrete: a typical featured image sized for a blog header, saved as a JPEG around 1200 pixels wide, commonly weighs somewhere between 150KB and 400KB depending on compression. A blog archive page showing 12 posts, each quietly loading its featured image with CSS’s display: none, could be pulling in over 2MB of images the visitor never actually sees. Switching to a method that removes the markup entirely, rather than just hiding it, eliminates those requests completely, which is the kind of change that shows up directly in Core Web Vitals tools like PageSpeed Insights or GTmetrix as a drop in total page weight and a faster Largest Contentful Paint score.
This doesn’t mean CSS is always the wrong choice. For a single post here and there, the extra image weight is negligible and not worth the added complexity of editing theme files. The performance argument only really matters at scale, on archive pages, category pages, or any template that loops through many posts at once.
Should You Remove the Image Entirely Instead of Hiding It?
There’s a simpler option worth considering before any of the above: in the block editor, open the Featured Image panel in the post sidebar and click “Remove featured image” for that specific post. This unassigns the image from the post entirely. The tradeoff is that the image will no longer be available as the Open Graph image for social sharing either, so this only makes sense when the post genuinely doesn’t need a representative image for search results or social previews, not just when you don’t want it shown inline on the page.
A middle-ground approach some sites use is to keep the featured image assigned (so SEO plugins and social sharing still have something to pull from) while hiding it visually only on the front end, using whichever of the three methods above fits the site’s setup. This gets the SEO benefit without the visual clutter, which is usually what people actually want when they go looking for how to hide a featured image in the first place.
Which Method Should You Actually Use
For a one-off post where the theme is showing a duplicate image or an awkward crop, custom CSS scoped to that post is the fastest fix and doesn’t require touching any core files. For a permanent, site-wide decision that the theme’s default featured image treatment isn’t wanted anywhere, the functions.php filter or the block editor template change is worth the extra ten minutes, because it also improves page speed instead of just hiding the symptom. A plugin sits in the middle: no code required, but it does mean one more piece of software to keep updated, and on a site already running a dozen plugins, that’s not always the best trade.
Site owners who aren’t comfortable in the code editor and only need the change on a handful of posts are usually best served by the plugin route or the block editor’s built-in “Remove featured image” option, both of which involve zero risk of breaking the theme. Developers maintaining a client site, or anyone comfortable working in a child theme, will generally get a cleaner long-term result from the functions.php approach, since it’s one less active plugin and it solves the underlying page-weight issue rather than papering over it.
Troubleshooting When Nothing Seems to Work
When the featured image refuses to disappear no matter which method is used, the cause is almost always one of a small handful of things. A page caching plugin like WP Rocket, W3 Total Cache, or a host-level cache such as those bundled with many managed WordPress hosts, is serving a stored version of the page from before the change was made. Clearing the site’s cache, and separately clearing the browser’s cache with a hard refresh, resolves this more often than any other single step.
A close second cause is specificity in CSS. If the theme’s own stylesheet targets the image with a more specific selector than the one added through Additional CSS, the theme’s rule wins even though the custom CSS was added afterward. Adding !important to the display rule as a temporary test will confirm whether this is the issue; if the image disappears with !important added, the long-term fix is either to write a more specific selector or to increase specificity properly rather than relying on !important permanently, since overusing it makes future CSS changes harder to reason about.
A less common but real possibility is that the theme is pulling the image through a background-image CSS property rather than an actual <img> tag, which is common in some magazine-style and portfolio themes. In that case, targeting display: none on the wrapper element still works, but setting it on an <img> selector that doesn’t exist in that theme’s markup will do nothing, which is another reason checking the actual rendered HTML with the browser’s inspector before writing CSS saves time over guessing.
Frequently Asked Questions
Will hiding the featured image with CSS hurt my SEO?
Not directly. Search engines don’t penalize a site for a hidden image the way they might for hidden text used to stuff keywords. That said, if the image had useful alt text describing the content, removing it from view (without removing the alt text from the underlying HTML) has no SEO downside either way.
Can I hide the featured image on just one post without a plugin?
Yes, by adding a custom CSS class to that specific post through the block editor’s Advanced panel, then targeting that class in your Additional CSS. This avoids installing a plugin for a single one-off case.
Why does the featured image still show up even after I added the CSS?
The most common cause is a caching plugin or CDN serving an old, cached version of the stylesheet. Clearing your site’s cache (and sometimes your browser’s cache) after saving the CSS usually resolves it. The second most common cause is simply targeting the wrong CSS class, which is why checking the actual class name with your browser’s inspector before writing the rule saves time.
Is there a difference between “hiding” and “removing” the featured image?
Yes. CSS hides the image from view but leaves it in the page’s HTML, meaning it still loads. The functions.php filter method, or unassigning the featured image from the post entirely in the editor, actually removes it from the markup, which is better for page weight if you never intend to show it.
Does hiding the featured image break the social share preview?
Not if the image stays assigned to the post. Facebook and X, along with most other platforms, pull the Open Graph image from the post’s meta tags, which is usually set separately in the SEO plugin and often defaults to the featured image behind the scenes. Hiding the image visually on the page, or removing it from the on-page markup with CSS or a filter, doesn’t touch that meta tag unless the image is also unassigned from the post entirely.
Does this apply the same way to WooCommerce product images?
Mostly, but WooCommerce product pages use their own gallery markup separate from the standard post thumbnail in many themes, so the CSS class targeting a WooCommerce product image is usually different from a blog post’s featured image class. The general approach, inspecting the element to find the right selector, still applies, but the specific class name in the example above won’t necessarily match a product page.