loop - Grid post page on Wordpress with Bootstrap, the_excerpt(); Problem

I'm trying to create a page on WordPress with a grid which contains al my posts.

The grid works well until when I add the the_excerpt(); for my post. The grid became a mess. The rows are not correct anymore.

This is what I have without the_excerpt();:

and this is what happens with the_excerpt();:

Here my code of page-post.php:

<?php /* Template Name: Blog-3 */ ?>

<?php get_header(); ?>

    <div>

    <div class="container">

        <?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

        <div class="row">

        <?php if( have_posts() ): ?>

            <?php while( have_posts() ): the_post(); ?>

            <div class="col-sm-6" style="margin-bottom: 65px;">

            <p>
                <?php if ( has_post_thumbnail() ) : ?>
                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a>
                <?php endif; ?>
            </p>

            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <p>Posted on <?php echo the_time('F jS, Y');?> by <?php the_author_posts_link(); ?> </p>

            <?php the_excerpt(); ?>

            </div><!-- col -->

            <?php endwhile; ?>

         </div><!-- row -->

    </div><!-- container -->

        <div>
            <span><?php previous_posts_link(__('« Newer','example')) ?></span> <span class="older"><?php next_posts_link(__('Older »','example')) ?></span>
        </div><!-- /.navigation -->

    <?php else: ?>

        <div id="post-404">

            <p><?php _e('None found.','example'); ?></p>

        </div><!-- /#post-404 -->

    <?php endif; wp_reset_query(); ?>

    </div><!-- /#content -->


<?php get_sidebar();
get_footer();?>

I'm trying to create a page on WordPress with a grid which contains al my posts.

The grid works well until when I add the the_excerpt(); for my post. The grid became a mess. The rows are not correct anymore.

This is what I have without the_excerpt();:

and this is what happens with the_excerpt();:

Here my code of page-post.php:

<?php /* Template Name: Blog-3 */ ?>

<?php get_header(); ?>

    <div>

    <div class="container">

        <?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

        <div class="row">

        <?php if( have_posts() ): ?>

            <?php while( have_posts() ): the_post(); ?>

            <div class="col-sm-6" style="margin-bottom: 65px;">

            <p>
                <?php if ( has_post_thumbnail() ) : ?>
                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a>
                <?php endif; ?>
            </p>

            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <p>Posted on <?php echo the_time('F jS, Y');?> by <?php the_author_posts_link(); ?> </p>

            <?php the_excerpt(); ?>

            </div><!-- col -->

            <?php endwhile; ?>

         </div><!-- row -->

    </div><!-- container -->

        <div>
            <span><?php previous_posts_link(__('« Newer','example')) ?></span> <span class="older"><?php next_posts_link(__('Older »','example')) ?></span>
        </div><!-- /.navigation -->

    <?php else: ?>

        <div id="post-404">

            <p><?php _e('None found.','example'); ?></p>

        </div><!-- /#post-404 -->

    <?php endif; wp_reset_query(); ?>

    </div><!-- /#content -->


<?php get_sidebar();
get_footer();?>

• posts
• loop
• css
• twitter-bootstrap

Share Improve this question edited Jul 7, 2017 at 13:05 Johansson 15.4k1111 gold badges4444 silver badges8080 bronze badges asked Jul 7, 2017 at 8:23 CrashyCrashy 19966 silver badges1717 bronze badges 4

• And your question is? Different height is a classical (bootstrap) grid problem, there are various approaches and answers, e.g. this one – kero Commented Jul 7, 2017 at 8:35
• I want to add "the_excerpt();" but I want to maintain the grid system, 2 posts for every row. – Crashy Commented Jul 7, 2017 at 8:42
• Then you can use a clearfix as described in the link answer after every other post – kero Commented Jul 7, 2017 at 8:43
• I tried to add <div class="clearfix"></div> after </div><!-- col --> but I loose my grid, I get just one coloumn. – Crashy Commented Jul 7, 2017 at 8:54

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

The way I tackle this issue is by closing the row every nth column, like so. You basically collect the total number of posts in the current loop then at the end of each loop, increment $i and check whether it's divisible by two wholly (I'm rubbish at explaining this part).

Example: You could tweak this to if ( $i % 3 == 0 ) if you were wanting rows of 3.

The example below can replace your entire container.

<div class="container">

    <?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

    <?php 
    // Get total posts
    $total = $wp_query->post_count;

    // Set indicator to 0;
    $i = 0;
    ?>

    <?php while( have_posts() ): the_post(); ?>

        <?php if ( $i == 0 ) echo '<div class="row">'; ?>

        <div class="col-sm-6" style="margin-bottom: 65px;">

        <p>
            <?php if ( has_post_thumbnail() ) : ?>
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a>
            <?php endif; ?>
        </p>

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <p>Posted on <?php echo the_time('F jS, Y');?> by <?php the_author_posts_link(); ?> </p>

        <?php the_excerpt(); ?>

        </div><!-- col -->

        <?php $i++; ?>

        <?php
        // if we're at the end close the row
        if ( $i == $total ) { 
            echo '</div>';
        } else {
            /** 
             * Perform modulus calculation to check whether $i / 2 is whole number
             * if true close row and open a new one
             */
            if ( $i % 2 == 0 ) {
                echo '</div><div class="row">';
            }
        }
        ?>

    <?php endwhile; ?>

</div><!-- container -->

Just to mention, that since Bootstrap 4, you may use Cards columns.

You can check it here.

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns.

<div class="card-columns">
  <div class="card">...</div>
  <div class="card">...</div>
  ...
</div>