Next Level Design

How I Fix “Featured Image Not Showing” in 15 Minutes

You publish a post, hit refresh, and the area where the hero image should live is perfectly blank. No error, no broken icon—just empty space. When a featured image doesn’t show, it’s almost never the image itself. It’s a handoff problem: WordPress stores the featured image correctly, but your theme or template isn’t outputting it, or something in the front end is hiding or blocking it. 

Start With The Basics

Think of this as a chain: WordPress metadata → template output → correct size exists → delivered asset → visible in CSS. If any link in the chain fails, the image won’t appear.Start with the simplest confirmation: the image must be set on the post. In the editor, the Featured image panel should hold a selected image; if you’re using a Query Loop block for your blog list, the “Featured image” block must exist inside the post template, and its “Display” option should be on. 

Classic vs. Block Themes

This sounds basic, but it’s the difference between an image that isn’t there and an image that’s being hidden.From there, your approach depends on the kind of theme you use.If your site runs a classic theme, featured images are a template responsibility. 

The theme should declare support with add_theme_support(‘post-thumbnails’) in functions.php, and the relevant templates must actually print the image. Inside single.php or a content template, you should see something like has_post_thumbnail() and the_post_thumbnail(‘large’) in the Loop. 

If switching to a default theme like Twenty Twenty-Four suddenly makes featured images appear, your current theme is missing that call or routing images to a custom size that doesn’t exist. Adding the snippet in the right location solves it quickly, and while you’re there, confirm that your custom post types include ‘supports’ => array( ‘thumbnail’ ); when they’re registered. Without it, WordPress won’t even offer the featured image box for that post type.Block themes move this to the Site Editor. 

Open Appearance → Editor, choose the Single template, and place the Featured Image block where you want it. For the blog list, open the Archive or the template used by your Posts page, select the Post Template inside the Query Loop, and add the Featured Image block. If your design needs a hero at the top of posts, consider a Cover block that uses the featured image as background, with a gradient for text contrast. 

 

Image Sizes and Regeneration

Once the block is present, the output exists—so if it’s still invisible, the culprit is usually size, caching, or CSS.After a theme switch or layout change, WordPress might be asking for a thumbnail size that hasn’t been generated yet. That happens when themes define add_image_size names with specific dimensions. 

Regenerating thumbnails

Regenerating thumbnails once will create those sizes for your existing media library. As a quick test, temporarily change the template call to the_post_thumbnail(‘full’) to confirm the original image renders. If it does, you know the size alias the template expects is missing, mislabeled, or set to 0 in code. Modern performance layers are powerful enough to make assets vanish if they’re misconfigured. 

Caching, Lazy‑Loading, and CDNs

Lazy‑loading and image optimization plugins sometimes rewrite <img> tags to use data-src, and if JavaScript is deferred or a script errors, the image never swaps in. Clear your plugin cache, server cache, and CDN, then reload with your browser dev tools open. If you see the <img> markup but the source is a data- attribute that never becomes a real URL, disable lazy‑loading for featured images or exclude that selector.

If the Network tab shows 403 or 404 for the image file, you’re dealing with delivery, not markup: hotlink protection at the CDN, a moved domain with old media URLs, or offloaded storage (S3, Cloudflare R2) with expired credentials. Fix the URL mapping via a search‑replace, re‑authenticate your offload plugin, or adjust hotlink rules. 

 

CSS, Layout, and Page Builders

Sometimes the image is fully present and loaded but visually suppressed. Inspect the element in the browser. If the container has zero height, overflow hidden, opacity 0, display none, or a position that places it behind other elements, that’s CSS, not WordPress. 

Query Loop cards often use aspect‑ratio wrappers; if the image size is missing or the wrapper relies on padding tricks, the result can collapse to nothing. Giving the wrapper a sensible min-height or switching the image size to one that exists often restores visibility.

 Also check object-fit and width/height values; an image set to height: 0 won’t show, even if the file is fine.Page builders add their own twists. In Elementor, a Single Post template must include the Featured Image widget or a widget with a dynamic tag set to Featured Image. In the Posts widget, the Image toggle needs to be on, with the correct size selected. 

 

Fallbacks, Edge Cases, and Process

If you’ve made a global header/hero that expects to pull the featured image on every page, remember that Pages don’t always use featured images by default; add fallbacks so the layout doesn’t break when a page has none. 

A simple pattern is: if the post has a thumbnail, show it; else, show a branded default.Here’s the idea in plain PHP if you’re working in a classic template: if ( has_post_thumbnail() ) { the_post_thumbnail(‘large’); } else { echo ‘<img src=”/path/to/fallback.jpg” alt=”Default” />’; }. For block themes, you can set a fallback image inside a Cover block or use a pattern that conditionally reveals a default. 

Edge cases can fool you. A custom query that runs outside The Loop won’t have access to the current post’s thumbnail unless you pass the ID and use get_the_post_thumbnail($id). Archive pages that rely on content-*.php partials might render differently from single posts; one template could be correct while the other is missing the image call. 

 

And some themes let you globally hide images in the Customizer—worth checking before you touch code.When I fix this for clients, I follow the same arc every time: confirm the image is set, verify the template outputs it, ensure the size exists, confirm the file delivers without 403/404, and remove any CSS or JS that hides it. 

Along the way I regenerate sizes after theme changes, set a safe default size for archives to avoid layout shifts, configure CDNs to play nicely with media, and add a graceful fallback image so an empty state never sneaks back in. 

If your featured images are still missing—or only vanish in specific contexts like archives, the homepage, or a page builder template—I can audit your theme and templates, regenerate the right sizes, tune your performance stack, and hand you a tidy, future‑proof setup with sensible fallbacks. Featured images should do what they’re named for: feature your content, every time. 

 

 

Scroll to Top