Display recent posts with thumbnails with masonry in wordpress - php

Question

I am working on a wordpress cms. On a page-template, I need to display recent 10 posts. So I tried to use, wp_get_recent_posts, found here in the codex, which I think is an appropriate hook for the purpose.The rest of the code is from my archive.php ( which displays the post-thumbnails in a masonry grid just fine in archive.php). I simply would like to achieve the same thing with the recent posts-thumbnails being on this page-template. Currently, I have this code on a template.
<div id="masonry">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="item normal" data-order='1'><!--BEGIN .item -->
<div <?php post_class(); ?> id="featured-<?php the_ID(); ?>">
<?php
$args = array('numberposts' => '10', 'meta_key' => '_thumbnail_id');
$recent_posts = wp_get_recent_posts($args);
foreach ($recent_posts as $recent) {
if (has_post_thumbnail($recent["ID"])) {
echo '<a href="' . get_permalink($recent["ID"]) . '">';
echo get_the_post_thumbnail($recent["ID"], 'archive_grid');
echo '</a>';
}
}
?>
</div>
</div>
<?php endwhile;
endif; ?>
<?php get_template_part('includes/index-loadmore'); ?>
</div><!--END #masonry -->
<div id="masonry-new"></div>
<div class="post-navigation clearfix"><!--BEGIN .post-navigation -->
<?php dt_pagination(); ?>
</div><!--END .post-navigation -->
ISSUE : This code returns just a single thumbnail from the most recent posts. I have no clue what is wrong with the loop. The other weird thing to notice is when I var_dump the $recent_posts it returns other text-contents of the posts just fine. If you need to know this, I have my setting as setting->reading->Blog pages show at most->20 posts.

Answer 1

First of all you don't need to have two loops if I understood correct what you want to do. Also 'meta_key' => '_thumbnail_id' isn't necessary. I suppose is just the thumbnail id and not a meta key created by you.
You could achieve what you want like that:
<div id="masonry">
<?php
$args = array(
'posts_per_page' => 10,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'suppress_filters' => false );
$recent_posts = get_posts( $args );
foreach ($recent_posts as $key=>$post): setup_postdata( $post ); {
?>
<div class="item normal" data-order='1'><!--BEGIN .item -->
<div <?php post_class(); ?> id="featured-<?php the_ID(); ?>">
<?php
if (has_post_thumbnail(get_the_ID())) {
echo '<a href="' . get_permalink(get_the_ID()) . '">';
echo get_the_post_thumbnail(get_the_ID(), 'archive_grid');
echo '</a>';
}
?>
</div>
</div>
<?php } ?> //end of foreach loop
<?php get_template_part('includes/index-loadmore'); ?>
</div><!--END #masonry -->
<div id="masonry-new"></div>
<div class="post-navigation clearfix"><!--BEGIN .post-navigation -->
<?php dt_pagination(); ?>
</div><!--END .post-navigation -->
But this way you have to fix the pagination your self.
UPDATE:
It seems that get_posts doesn't work with pagination.
<div id="masonry">
<?php
$paged = 1;
if ( get_query_var('paged') ) $paged = get_query_var('paged');
if ( get_query_var('page') ) $paged = get_query_var('page');
$args = array(
'posts_per_page' => 10,
'paged' => $paged,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'suppress_filters' => false );
$wp_query = new WP_Query( $args );
while ( $wp_query->have_posts() ) : $wp_query->the_post();
?>
<div class="item normal" data-order='1'><!--BEGIN .item -->
<div <?php post_class(); ?> id="featured-<?php the_ID(); ?>">
<?php
if (has_post_thumbnail(get_the_ID())) {
echo '<a href="' . get_permalink(get_the_ID()) . '">';
echo get_the_post_thumbnail(get_the_ID(), 'archive_grid');
echo '</a>';
}
?>
</div>
</div>
<?php endwhile; ?> //end while loop
<?php get_template_part('includes/index-loadmore'); ?>
</div><!--END #masonry -->
<div id="masonry-new"></div>
<div class="post-navigation clearfix"><!--BEGIN .post-navigation -->
<?php dt_pagination(); ?>
</div><!--END .post-navigation -->
<?php wp_reset_postdata(); ?>
If the second solution doens't work you have to provide the dt_pagination() function to see how is working.
Hope it helps.

Answer 2

First thing is you dont need two loops. Try new wp query instead of wp_get_recent_posts. here is an example for you.
<div id="masonry">
<?php $args = array('post_type' => 'post','posts_per_page' => '10' );
$loop = new WP_Query($args); if( $loop->have_posts() ):
while( $loop->have_posts() ): $loop->the_post(); global $post; ?>
<div class="item normal" data-order='1'><!--BEGIN .item -->
<div <?php post_class(); ?> id="featured-<?php the_ID(); ?>">
<?php
if (has_post_thumbnail(get_the_ID())) {
echo '<a href="' . get_permalink(get_the_ID()) . '">';
echo get_the_post_thumbnail(get_the_ID(), 'archive_grid');
echo '</a>';
}
?>
</div>
</div>
<?php endwhile; endif; wp_reset_Query(); ?>
<?php get_template_part('includes/index-loadmore'); ?>
</div><!--END #masonry -->