Display recent posts with thumbnail within Masonry

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 masonry just fine. I simply would like to achieve the same thing with the recent posts. This is what my code looks like :

?php 
/* 
Template Name: Recent Profiles 
*/          
get_header(); 
?

h1 class="page-title"?php the_title(); ?/h1    

div id="content"
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(); ?"!--BEGIN .hentry --





?php
    $args = array( 'numberposts' = '10' );
    $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!--END .hentry--  
/div!--END .item --

?php endwhile; endif; ?

?php get_template_part('includes/index-loadmore'); ?

/div!--END #masonry --
div id="masonry-new"/div

!--BEGIN .post-navigation --
        div class="post-navigation clearfix"
            ?php dt_pagination(); ?
        !--END .post-navigation --
        /div

    /div!-- #content --

?php get_footer(); ?

Issue : The issue is, the code is just displaying one recent post thumbnail instead of the expected 10. Please help me out for what I might be missing here. Perhaps something wrong with the loop. FYI archive_grid is the name of the custom thumbnail.

Topic masonry recent-posts Wordpress

Category Web


You're trying to display in a custom template, so use query post type.

Check this link.


Add the meta_key parameter to fetch the latest posts which have featured image set. $args = array( 'numberposts' => '10', 'meta_key' => '_thumbnail_id' );

<?php
/* 
Template Name: Recent Profiles 
*/
get_header();
?>
<h1 class="page-title"><?php the_title(); ?></h1>

    <div id="content">
        <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(); ?>"><!--BEGIN .hentry -->
                        <?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>
                    <!--END .hentry-->
                </div><!--END .item -->
            <?php endwhile; endif; ?>
            <?php get_template_part( 'includes/index-loadmore' ); ?>
        </div>
        <!--END #masonry -->
        <div id="masonry-new"></div>
        <!--BEGIN .post-navigation -->
        <div class="post-navigation clearfix">
            <?php dt_pagination(); ?>
            <!--END .post-navigation -->
        </div>
    </div><!-- #content -->
<?php get_footer(); ?>

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.