How to get a page's featured image from a term slug (same name)

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" src="https://example.com/wp-content/uploads/2021/12/sample-image-300x205.jpg" ... 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="">';