How to display WordPress posts in a table using Bootstrap?

Question

I want to display my recent blog posts in this specific layout in WordPress. Here it is below:

1|2|3
-----
4|5|6

Here is my code so far.....

<div class="container post_container">
    <div class="row">
        <div class="col-xs-12">
        <h1>Recent Posts</h1>

            <?php 

            $recentPost = new WP_Query('type=post&posts_per_page=6&order=ASC&');


            if(have_posts()) {
                while($recentPost->have_posts()) {
                    $recentPost->the_post(); ?>


        <br>
        <br>

        <div class="posts_table">
            <--Where all recent posts will be displayed-->
        </div>



                    <?php

                }
            }



             ?>

I want to use the WordPress loop display the last six posts going in chronological order and I have no idea how to create it and very confused. I have zero idea if I should be using HTML table or Bootstrap grids or both?

Answer 1

You could use the WP_Query argument as an array, it's much less confusing.

Since you want to fetch the posts in a chronological order, order by date . Your instance of the class WP_Query becomes:

$recentPost = new WP_Query(
    array(
        'type'           => 'post',
        'posts_per_page' => 6,
        'order'          => 'ASC',
        'orderby'        => 'date' // Order by date!
    )
);

Then I see you're using Bootstrap with rows and columns.

First step, create everything around the while() loop:

<?php 


    if(have_posts()) {

        // First, build parent DIV element outside the while() loop
        ?>

        <div class="row posts_table">

        <?php

        // Setup the counter
        $counter = 0;

Second, build everything inside the while loop:

        // Iterate over the posts
        while($recentPost->have_posts()) {

            // Get next
            $recentPost->the_post();

            // Render post content here
            // Bootstrap uses 12 columns, we want 3 blocks. 12/3 = 4 thus use cols-xs-4.
            ?>

            <div class="cols-xs-4">
                <?php the_title(); ?>
            </div>

This is the tricky part. After three posts, we're building a new row element. Why? Because Bootstrap was designed to use 12 columns in a row, no more.

If you want to refactor this code later on, let's say you want 9/15 posts per page, you can easily update the posts_per_page value from the array inside WP_Query without manually putting in a break at 3, 6, 9 and so on.

            <?php

            // Increment for next post
            $counter++;

            // Use the modulo to break a Bootstrap row and start a new one
            // The HTML inside this control flow will be printed every third post (every third iteration).
            if($counter % 3 == 0){
                ?>
                </div>
                <div class="row posts_table">
                <?php
            }

        }

Finally, we only have to close our last .row.posts_table element.

        ?>

        </div>
        <!-- end of .row.posts_table -->

        <?php
    }


 ?>

Also, check out the WordPress documentation on WP_Query , especially the WP_Query orderby part .

I don't know if .posts_table has any meaning to the website, if not => it can be removed.

Answer 2

I think you might be looking for something like this. Note that @Joachim has provided a more in depth answer but the below is a modified version of your original code that might be a good reference for you moving forward.

<div class="container post_container">
    <div class="row">
        <div class="col-xs-12">
        <h1>Recent Posts</h1>

            <?php 

            $recentPost = new WP_Query('type=post&posts_per_page=6&order=ASC&');


            if(have_posts()) {
                // the wrapper div goes between the IF outside the while
                // added a '.row' class here ?>
                <div class="posts_table row">
                    <?php
                    while($recentPost->have_posts()) {
                        $recentPost->the_post(); 
                            // the column class is added below here inside the WHILE
                            // it needs to output on each loop ?>
                            <div class="col-xs-4">

                                <!-- post content comes here -->

                            </div>

                        <?php

                    } // end the WHILE
                // the .posts_table wrapper is closed here outside the WHILE inside the IF ?>
                </div>
            <?php
        } // end the IF




             ?>