php - Using featured image of blog archive page

admin管理员组

文章数量:1122846

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
                if ( has_post_thumbnail()) : // Check if Thumbnail exists
                    $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;
        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' );
        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(); ?>

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
                if ( has_post_thumbnail()) : // Check if Thumbnail exists
                    $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;
        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' );
        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(); ?>

• php
• post-thumbnails
• blog

Share Improve this question edited Apr 6, 2024 at 5:40 YourManDan 43422 silver badges1212 bronze badges asked Apr 22, 2019 at 16:43 RLMRLM 24755 silver badges1919 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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>';
    } 
    
    get_template_part( 'loop' );
    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>

本文标签： phpUsing featured image of blog archive page