Create a loop for recent post with image outside wordpress - php

Question

I need to create a recent posts section outside a WordPress website, but the result is incorrect (see image). I used this PHP code:
// elsewhere in code...
require "wp-load.php";
// the code that is generating the recent posts section
$posts = get_posts( array( 'posts_per_page' => 1 ) );
$recent_posts = wp_get_recent_posts(array('numberposts' => 7 ) );
foreach ($posts as $_post) {
foreach($recent_posts as $post) {
if ( has_post_thumbnail( $_post->ID ) ) {
echo '<div class="owl-item">';
echo '<figure class="blog-item-container">';
echo '<span class="blog-item-img">';
echo get_the_post_thumbnail( $_post->ID, array(480, 305) );
echo '</span>';
echo '<figcaption>';
echo '<h3>', $post['post_title'], '</h3>';
echo '</figcaption>';
echo '</figure>';
echo '</div>';
}
}
}
I was expecting to get the image for each specific recent post. This result gives to me the correct recent post, but the image is the same for all the posts. Why is the image the same?

Answer 1

Here's some comments on your code, which will hopefully explain what's going wrong, or help you get to the bottom of it:
// Here you are getting ONE post for some reason, and putting it in the $posts variable
$posts = get_posts( array( 'posts_per_page' => 1 ) );
// Here you are getting 7 posts, and putting in the $recent_posts variable
$recent_posts = wp_get_recent_posts(array('numberposts' => 7 ) );
// Here you are "looping" over the ONE post and putting into $_post variable.
// So here, $_post is made to reference the single most recent post
foreach ($posts as $_post) {
// Here, you are "looping" over the 7 recent posts, putting into $post variable
foreach($recent_posts as $post) {
// Here you ask if the ONE most recent post ($_post) has a featured image.
// I doubt this is what you actually want, as this will
// be run for all 7 recent posts, but is only referencing
// the single ONE post
if ( has_post_thumbnail( $_post->ID ) ) {
echo '<div class="owl-item">';
echo '<figure class="blog-item-container">';
echo '<span class="blog-item-img">';
// here you are displaying the image for the ONE post, not the 7 most recent posts
echo get_the_post_thumbnail( $_post->ID, array(480, 305) );
echo '</span>';
echo '<figcaption>';
// Here you are referencing the title, link, etc.
// for the 7 most recent posts
echo '<h3>', $post['post_title'], '</h3>';
echo '</figcaption>';
echo '</figure>';
echo '</div>';
}
}
}
So, given your question of "recent posts", and your comment that it is incorrect to show the same featured image for all of them, I suspect the code should look like this (NOTE: you can remove all of the commented code, I left it here to explain what the changes are):
// remove this - no need for the single most recent post
// $posts = get_posts( array( 'posts_per_page' => 1 ) );
$recent_posts = wp_get_recent_posts(array('numberposts' => 7 ) );
// remove this - don't loop over the single most recent post
// foreach ($posts as $_post) {
foreach($recent_posts as $post) {
// change this to $post['ID'] (from $_post->ID)
if ( has_post_thumbnail( $post['ID'] ) ) {
echo '<div class="owl-item">';
echo '<figure class="blog-item-container">';
echo '<span class="blog-item-img">';
// change this to $post['ID'] (from $_post->ID)
echo get_the_post_thumbnail( $post['ID'], array(480, 305) );
echo '</span>';
echo '<figcaption>';
echo '<h3>', $post['post_title'], '</h3>';
echo '</figcaption>';
echo '</figure>';
echo '</div>';
}
}
// remove this, since we are removing the loop
// }