I have this code (that i've inserted into archive.php) that displays a page's content on the corresponding post category archive with the same slug.

<?php $term = get_queried_object(); ?> <?php $page = get_posts([ 'name' => $term->slug, 'post_type' => 'page']); if ( $page ){ echo $page[0]->post_content; } ?>

I'd like to find a way I can use the term slug to display the page's featured image.

  • ... and while i'm asking, I'd like to do the same for the page's title, custom fields, date, in fact all the page's meta.
    – Pete
    Dec 9, 2021 at 1:21
  • 1
    In response to the original question (and not your comment), if you're referring to the same page in your code, i.e. $page[0], then you could just use functions like get_the_post_thumbnail() to display the page's featured image. E.g. Add echo get_the_post_thumbnail( $page[0] ); inside the if in your code.
    – Sally CJ
    Dec 9, 2021 at 17:25
  • Thanks Sally, that works. I'll have a go at the other stuff.
    – Pete
    Dec 10, 2021 at 5:05
  • How would I change the thumbnail size?
    – Pete
    Dec 10, 2021 at 5:10
  • 1
    Yep works a treat. thanks.
    – Pete
    Dec 12, 2021 at 8:11

1 Answer 1


So as I said in the comments, if you're referring to the page referenced by the $page[0] variable, then you could just use get_the_post_thumbnail() like so: (note that I checked if $page[0] is set before attempting to use it)

// The HTML/formatting is entirely up to you..
if ( ! empty( $page ) && isset( $page[0] ) ) {
    echo get_the_post_thumbnail( $page[0] );
    echo '<hr>' . $page[0]->post_content;

Please check the documentation for more details on using the function, but as for changing the or using a different thumbnail size (the default size is named post-thumbnail), just set the second parameter to the name of a registered image size, e.g. medium or a-custom-size. E.g.

echo get_the_post_thumbnail( $page[0], 'medium' );

And note that featured images or post thumbnails have their own post where the type is attachment, so if you want to get the ID of a post thumbnail or the attachment post, you can use get_post_thumbnail_id():

$thumb_post_id = get_post_thumbnail_id( $page[0] ); // get the post ID
$thumb_post    = get_post( $thumb_post_id );        // get the full post data

// For debugging purposes:
var_dump( $thumb_post_id, $thumb_post );

So actually, once you have the post data (e.g. the one in $page[0] and $thumb_post above), you could then easily get all the other data for that post like the featured image if any/applicable, title, date, custom fields, categories, etc. Try a var_dump( $page[0] ); and then you'd see various post data, however, for custom fields and other data not directly available in the post object, you can ask in separate questions. :)

Additional Notes

get_the_post_thumbnail() uses wp_get_attachment_image() which adds the srcset and sizes attributes used to make the image responsive (so that the browser could pick the right image to load based on the user's device) — see Resolution switching: Different sizes on the MDN Web Docs website.

Therefore, in reply to your comment: "echo get_the_post_thumbnail( $page[0],'medium' ); isn't working", it's probably actually working, but the browser picked a different image responsively based on the above attributes.

For example in my case, echo get_the_post_thumbnail( $page[0], 'medium' ) did output the correct image URL (which became the value of the image's src attribute) for the medium size (300px wide):

<!-- I wrapped the srcset value for brevity -->
<img width="300" height="205"
    srcset="https://example.com/wp-content/uploads/2021/12/sample-image-300x205.jpg 300w,
        https://example.com/wp-content/uploads/2021/12/sample-image-1024x701.jpg 1024w,
        https://example.com/wp-content/uploads/2021/12/sample-image-768x526.jpg 768w,
        https://example.com/wp-content/uploads/2021/12/sample-image-1536x1051.jpg 1536w,
        https://example.com/wp-content/uploads/2021/12/sample-image.jpg 1920w"
    sizes="(max-width: 300px) 100vw, 300px" />

But my browser's viewport width was 360px, hence the browser picked another image (768px wide) from the srcset attribute — and if there was also a 600px image there, then that one would've been used instead of the 768px.

Don't want the srcset and sizes attributes?

Well, that's not a good idea and the MDN Web Docs also stated, "Using this technique could save mobile users a lot of bandwidth", so I would suggest you to just keep using that technique, i.e. those two attributes.

However, just so that you know, you can use wp_get_attachment_image_src() like so to manually generate the <img> tag, which then gives you a full control over the HTML. E.g.

$id   = get_post_thumbnail_id( $page[0] );
$data = wp_get_attachment_image_src( $id, 'medium' );

if ( $data ) {
    echo '<img src="' . esc_url( $data[0] ) . '" width="' . $data[1] . '" height="' . $data[2] . '" alt="">';

And there's also get_the_post_thumbnail_url() if you just want to get the URL. E.g.

$url = get_the_post_thumbnail_url( $page[0], 'medium' );

echo '<img src="' . esc_url( $url ) . '" alt="">';
  • 1
    That was a great answer and explanation, it clears up for me know. Many thanks.
    – Pete
    Dec 11, 2021 at 1:50

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.