Display recent posts with thumbnails with masonry in wordpress

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 -->