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?

you will have to modify the php to include the markup that you want to have either tables or grids(whatever that is). You may need to modify or create wp view files to best accomplish this. — happymacarts
– happymacarts, Commented Sep 9, 2016 at 14:57
It can be coded into this theme template you provided code for. I think there's a misunderstanding going on in the comments. What @happymacarts is saying is that you need to include the html markup in this theme template - what I think you mean is that you need to know what that code is and where to place it. — William Patton
– William Patton, Commented Sep 9, 2016 at 15:31

Joachim · Accepted Answer · 2016-09-09 15:37:38Z

2

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.

answered Sep 9, 2016 at 15:37

Joachim

3191 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

William Patton Over a year ago

Bootstrap was adjusted some time ago to work just fine if the total amount of columns inside exceeded 12 - it just wraps to a new line on it's own. If you add 6 elements with .col-xs-4 to it will work just fine and wrap to 2 rows of equal size. jsfiddle.net/williampatton/1uk8of11

Joachim Over a year ago

I did not know that. That's a nice development. So if you have a new Bootstrap version you can skip the tricky part.

William Patton Over a year ago

Yup :) For the sake of simplicity it can often be omitted. Obviously it's good practice to wrap with a .row whenever possible but sometimes the additional effort isn't really worth it.

William Patton · Accepted Answer · 2016-09-09 15:50:04Z

1

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




             ?>

answered Sep 9, 2016 at 15:50

William Patton

7309 silver badges22 bronze badges

2 Comments

Joachim Over a year ago

This might be easier for TS to work with. I tend to be verbose.

William Patton Over a year ago

@Joachim I have the a similar verbosity issue sometimes haha. Honestly I was in the middle of writing a more complete answer similar to yours when your answer popped up on the question so instead I just pasted a very simple example code based on the original code OP posted. I thought both examples here would be more likely to increase the benefit OP got from the question.

Collectives™ on Stack Overflow

How to display WordPress posts in a table using Bootstrap?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related