Featured Image Not Working on the WordPress Posts Page

When you set a static page as your Posts page under Settings > Reading, WordPress shows the blog index at that URL, not the page itself. Functions such as the_post_thumbnail() then refer to the blog posts in the loop, so the featured image you set on the Posts page never shows up, for example in a header banner.

The fix is to read the page’s ID from the page_for_posts option and get its featured image directly. Place the code where your banner is output, usually header.php or home.php.

<?php if(is_home()) {
    $img = wp_get_attachment_image_src(get_post_thumbnail_id(get_option('page_for_posts')),'full');
    $featured_image = $img[0];
}?>
<div class="banner-image" style="background-image:url('<?php echo $featured_image ?>')"></div>

How it works

• is_home() is true on the blog posts index, so the code only runs there.
• get_option( 'page_for_posts' ) returns the ID of the page chosen as the Posts page.
• get_post_thumbnail_id() gets that page’s featured image ID, and wp_get_attachment_image_src() returns the image in the full size as an array; index 0 is the URL.
• The URL is printed as a CSS background image on .banner-image. Give that class a height and a background-size in your stylesheet, since an empty div has no height of its own. Using a featured image as a CSS background covers the same technique on single posts.

On other pages $featured_image is never set, so PHP reports an undefined variable if the banner div is still printed there. Set it to an empty string before the if, or move the div inside the condition. It’s also good practice to wrap the URL in esc_url().

Related articles

• everyday WordPress theme snippets: includes the Posts page URL from the same page_for_posts option