Using featured image of blog archive page

Question

You need to grab the ID of the page you’ve set as your Posts page in Settings > Reading in order to access its properties. To do that, check for the page_for_posts option, which returns the ID:

$page_for_posts = get_option( 'page_for_posts' ); 
if ($page_for_posts && has_post_thumbnail($page_for_posts) {
    $thumb_id = get_post_thumbnail_id( $page_for_posts);
    $url = wp_get_attachment_url( $thumb_id );
    //... the rest of your featured image display stuff here
}

This code should be placed outside of (before) the index.php loop which displays all your blog posts & their featured images, it doesn’t replace it.

You can use this $page_for_posts ID to display other elements of that page, too, including the title, eg: echo get_the_title($page_for_posts);

EDIT:

Try this for your index.php; I’m assuming your actual posts loop is inside the ‘loop’ template part. This will just dump out an <img> tag at the top of the Posts page with that page’s featured image.

<?php get_header(); ?>

    <main role="main" aria-label="Content" class="page-bg page-margin">

        <!-- section -->
        <section>

        <?php 
        // Get the ID of the page set to Display Posts in Settings > Reading
        $page_for_posts = get_option( 'page_for_posts' ); 

        // If that page ID exists, and that page has a Featured Image....
        if ($page_for_posts && has_post_thumbnail($page_for_posts)) {

            // Get the ID of that page's Featured Image
            $thumb_id = get_post_thumbnail_id( $page_for_posts);

            // Display that image
            echo wp_get_attachment_image($thumb_id);
        } 

        // Display the page title if set; else use 'News'              
        if ($page_for_posts) {
          echo '<h1 class="archive-h1">' . get_the_title($page_for_posts) . '</h1>';
        } else {
          echo '<h1 class="archive-h1">News</h1>';
        }
        ?>

            <?php get_template_part( 'loop' ); ?>

            <?php get_template_part( 'pagination' ); ?>

        </section>
        <!-- /section -->
    </main>


<?php get_footer(); ?>

I use this function to output that featured image: wp_get_attachment_image() That function will output an <img> tag with scrset attributes for responsive images. If you’d rather have the page’s featured image be displayed as a background image, you could still use wp_get_attachment_url() to get just the URL and use your <div> to display it, like so:

<?php $url = wp_get_attachment_url($thumb_id); ?>
<div class="page-thumb" style="background-image:url('<?php echo $url ?>');"></div>

Related Posts: