I am trying to output the latest 5 posts from my blog. I would like each post thumbnail to populate divs in the following format.

<div class="row full">
    <div class="large-6 medium-6 small-12 columns"></div>
    <div class="large-6 medium-6 small-12 columns"></div>
</div>

<div class="row full">
    <div class="large-4 medium-4 small-12 columns"></div>
    <div class="large-4  medium-4 small-12 columns"></div>
    <div class="large-4  medium-4 small-12 columns"></div>
</div>

I’ve obtained this code from another post with a few edits but I’m not hitting the mark.

<?php
// Let's get all posts with thumbnail set in some category
$args = [ 
    'posts_per_page' => 5,
    'orderby'      => 'date',
    'order'    => 'DESC'
];

// Fetch posts
$query = new WP_Query( $args );

if( $query->have_posts() )
{
    while ( $query->have_posts() )
    {
        $query->the_post(); 

        // Collect all items into a temp array    
        $tmp[] = sprintf( 
            '<div class="small-12 medium-6 large-6 columns"><a href="https://wordpress.stackexchange.com/questions/216480/%s">%s</a></div>',
            get_permalink(),
            get_the_post_thumbnail( get_the_ID(), 'large' )
        );
    } 
      $tmpp[] = sprintf( 
            '<div class="small-12 medium-4 large-4 columns"><a href="https://wordpress.stackexchange.com/questions/216480/%s">%s</a></div>',
            get_permalink(),
            get_the_post_thumbnail( get_the_ID(), 'large' )
        );
    } 

    // Split the divs into rows of 2 items
    $rows = array_chunk( $tmp, 2 );
// Split the second chunk of divs into rows of 3 items
    $rowss = array_chunk ($tmpp, 3);

    // Housecleaning
    unset( $tmp );
    unset( $tmpp);
    wp_reset_postdata();

    // Output the rows
    foreach( $rows as $row ){
        printf( '<div class="row full">%s</div>', join( '', $row ) ); 
    }
     foreach( $rowss as $roww ){
        printf( '<div class="row full">%s</div>', join( '', $roww ) ); 
     }
?>

Unfortunately it’s not working correctly. What it’s outputting is this:

<div class="row full">
  <div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2015/12/15/5-decorating-tips-for-every-living-room/"><img width="1024" height="640" src="https://localhost:8888/myoshdiy/wp-content/uploads/2015/12/living-room-pictures-1024x640.jpg" class="attachment-large wp-post-image" alt="living-room-pictures"></a></div>
  <div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/excepteur-sint/"><img width="800" height="533" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/LED-flushmount.jpg" class="attachment-large wp-post-image" alt="LED-flushmount"></a></div>
</div>
<div class="row full">
  <div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/post-template-2/"><img width="576" height="384" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/165912.jpg" class="attachment-large wp-post-image" alt="165912"></a></div>
  <div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/left-sidebar-post/"><img width="800" height="534" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/165961.jpg" class="attachment-large wp-post-image" alt="165961"></a></div>
</div>
<div class="row full">
  <div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/wine-101-essential-wine-tips-and-information/"><img width="1024" height="682" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/IMG_9944-1300x866-1024x682.jpg" class="attachment-large wp-post-image" alt="IMG_9944-1300x866"></a></div>
</div>
<div class="row full">
  <div class="small-12 medium-4 large-4 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/wine-101-essential-wine-tips-and-information/"><img width="1024" height="682" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/IMG_9944-1300x866-1024x682.jpg" class="attachment-large wp-post-image" alt="IMG_9944-1300x866"></a></div>
</div>

2 Answers
2

That’s a pretty complicated approach you’re taking. Why not simply add a counter? Like this:

$i=1;
echo '<div class="row full">';
if( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        if ($i < 3)
          $class = "large-6 medium-6 small-12 columns"
        else
          "large-4 medium-4 small-12 columns";
        echo '<div class="' . $class . '">'
        ... output your post ...
        echo '</div>'
        if ($i=2) echo '</div><div class="row full">';
        $i = $i+1;
        }
    }
echo '</div>';

Leave a Reply

Your email address will not be published. Required fields are marked *