0

On my custom wordpress theme, I am using the featured image thumbnail for all of my pages to be the header of the page.

I've created a page called "blog" and using it as the archive ( via settings -> reading -> selecting "blog" for post display page ) reading, but when I try to use the featured image of that page, it tries to display ALL of the featured images from the blogs, not just my one archive page how I want.

I'm pretty sure it's a matter of altering the if statement to only show the thumb of the archive page, but I'm not sure how.

Here is my code on index.php

<?php get_header(); ?>
        <section>
            <?php if ( have_posts()) : while ( have_posts() ) : the_post(); ?>
            <!-- post thumbnail -->
            <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
            <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                <a class="page-thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <div class="page-thumb" style="background-image:url('<?php echo $url ?>');"></div>
                </a>
            <?php endif; ?>
            <!-- article -->
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <h1 class="page-h1 animate-reveal">
                        <?php the_title(); ?>
                    </h1>

                </article>
            <!-- /article -->

            <?php endwhile; ?>
            <?php else : ?>
            <!-- article -->
            <!-- /article -->
            <?php endif; ?>

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

            <h1 class="archive-h1">News</h1>

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

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

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


<?php get_footer(); ?>

EDITS using answer #1

complete index.php file below

 <?php get_header(); ?>

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



        <!-- section -->
        <section>
            <?php 
                $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 );
                if ( have_posts()) : while ( have_posts() ) : the_post(); ?>
            <!-- post thumbnail -->
            <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
            <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                <a class="page-thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <div class="page-thumb" style="background-image:url('<?php echo $url ?>');"></div>
                </a>
            <?php endif; ?>
            <!-- article -->
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <h1 class="page-h1 animate-reveal">
                        <?php the_title(); ?>
                    </h1>

                </article>
            <!-- /article -->

            <?php endwhile; ?>
            <?php else : ?>
            <!-- article -->
            <!-- /article -->
            <?php endif; ?>

        <?php } ?>
            <h1 class="archive-h1">News</h1>

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

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

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


<?php get_footer(); ?>
1

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>
  • This makes perfect sense, thanks. I'm still getting the same result, please view the edited version of the question above to see the full index.php with your edits. – RLM Apr 22 at 18:24
  • I've updated my answer. If this isn't working, try echoing out the $page_for_posts to confirm it's the correct Page ID for the page set to display your posts, then echo out the $thumb_id to confirm it's the ID of the Featured Image for that page. – Michelle Apr 23 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.