0

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();:

enter image description here

and this is what happens with the_excerpt();:

enter image description here

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();?>
4
  • And your question is? Different height is a classical (bootstrap) grid problem, there are various approaches and answers, e.g. this one
    – kero
    Jul 7 '17 at 8:35
  • I want to add "the_excerpt();" but I want to maintain the grid system, 2 posts for every row.
    – Crashy
    Jul 7 '17 at 8:42
  • Then you can use a clearfix as described in the link answer after every other post
    – kero
    Jul 7 '17 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
    Jul 7 '17 at 8:54
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 -->
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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