I’m a little lost with this one, so I’m really hoping for some help as to how to modify the code below into something that works for me. I'm using the CPTUI plugin and it's working fine. The code snippet below is from a modified Ordered List that I created. It's displaying the page, as it should, in ordered list with a thumbnail. All is working as it should. However, I'd like to display this as a row of three table cells

here's a link to the code I have > https://pastebin.com/N44fyEhB

The code snippet for the while loop:

<?php $args = array( 'post_type' => 'the_members', 'orderby' => 'ID', 'order' => 'DESC', 'posts_per_page' => '200' );
            $ourposts = new WP_Query( $args );
            if ( $ourposts->have_posts() ) : while ( $ourposts->have_posts() ) : $ourposts->the_post(); ?>
            <li><a href="<?php the_permalink();?>"><?php the_post_thumbnail( array(200, 150) );?></a><br><?php echo get_the_date( 'Y-m-d' ); ?> </i></li>
    endif; ?>

What I’m looking for is a way to display 3 columns in a single row.... I know that the while loop has to look a little like this >

    <?php $args = array( 'post_type' => ‘themembers’, 'orderby' => 'ID', 'order' => 'DESC', 'posts_per_page' => '200' );
     $i = 0; 
     echo ‘<tr>’;
     $ourposts = new WP_Query( $args );
     while($row = $ourposts) {
       $img = $row['the_post_thumbnail'];
       $img_link = $row['the_permalink’];
       if $img = ( $i % 2 == 0 ); 
            echo '<td><a href=\">’; $img_link; echo '\">'; $img; echo ‘</a>’; } ?>

       <?php endif;
       echo '<tr>';

Is this even close ? Am I on the right track ????? I”m just guessing above….help.

Another method would be to use CSS to solve this problem, but if you think the PHP above is awful you should see how I mangle CSS.

Are there any code examples (Tables or CSS) out there as to specifically HOW to do this ?

Any pointers would be helpful.

1 Answer 1


Maybe this help you:

$ourposts = new WP_Query( $args );
// ask if there results
if( $ourposts->have_posts() ):
    $i = 0;
    // outside the while you open and close the tr so inside the while yo only have to print a close tr and reopen it
    echo '<tr>';
    while($ourposts->have_posts()) : $ourposts->the_post();
        // every three posts you closes and open a tr
        if( $i%3==0 ){
            echo '</tr><tr>';
        echo '<td>'.get_the_title().'</td>';
    // then close the tr
    echo '</tr>';
  • Thanks, that nearly did the trick. Nearly. There's an oddity going on that I don't think I can figure out on my own. Your code above MOSTLY works. However if you follow the links, you'll see the two oddities. 1.) the First row, only has 2 entries. tangotopics.com/premium-content-test 2.) If I convert the entry to the featured image (which is what it's supposed to be) anyway, the images never enter the cells in the rows, they're outside the rows. But there are 3 of them per 'row'. tangotopics.com/premium-content-test2 Nov 24, 2017 at 20:51
  • Thanks Agustin. The table solution is a little too unwieldy for my needs. I've gone with a CSS solution, which as it turns out was much simpler. [link] (wordpress.stackexchange.com/questions/286888/…) Nov 24, 2017 at 23:35
  • glad to help, the thing is to test different solutions so you find the better one suits you, eventually you gain practice and learn to find the right solution early Nov 26, 2017 at 12:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.