1

I'm trying to get my custom post loop to show in the 3 column bootstrap grid. Right now they are stacked on top of each other vertically.

I know I must be missing something simple - have looked at other questions on this and the code is totally different from mine - I just worked it all out like this. It works great, except the layout.

Here is my code:

    <section id="services">

    <div class="container">

        <h2></h2>
        <p class="lead"></p>

    <?php query_posts('posts_per_page=3&cat=6&post_type=our_services'); ?>

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

        <div class="row">


            <div class="col-sm-4">


<?php if ( has_post_thumbnail()) { $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>

    <img src="<?php echo $url; ?>" alt="<?php the_title() ?>">

                <h3><?php the_title() ?></h3>
                <p><?php the_excerpt() ?></p>
                <a href="<?php the_permalink() ?>" class="btn btn-success">Learn more <i class="fa fa-angle-right" aria-hidden="true"></i></a>


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


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

         <?php } ?>

        <?php endwhile; endif; ?>

    </div><!-- container -->
</section><!-- services -->

<?php wp_reset_query(); ?>
2
  • ` <div class="row">` keep it outside of while
    – BlueSuiter
    Apr 24, 2017 at 10:57
  • Great, cheers...all sorted.
    – Tracy
    Apr 24, 2017 at 11:37

1 Answer 1

0

You needs to change Your code like following:

 <section id="services">

    <div class="container">

        <h2></h2>
        <p class="lead"></p>

    <?php query_posts('posts_per_page=3&cat=6&post_type=our_services'); ?>

    <div class="row">

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


            <div class="col-sm-4">


<?php if ( has_post_thumbnail()) { $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>

    <img src="<?php echo $url; ?>" alt="<?php the_title() ?>">

                <h3><?php the_title() ?></h3>
                <p><?php the_excerpt() ?></p>
                <a href="<?php the_permalink() ?>" class="btn btn-success">Learn more <i class="fa fa-angle-right" aria-hidden="true"></i></a>


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

         <?php } ?>

        <?php endwhile; endif; ?>

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

    </div><!-- container -->
</section><!-- services -->

<?php wp_reset_query(); ?>
1
  • This is perfect cheers! I knew it would be something simple :)
    – Tracy
    Apr 24, 2017 at 11:37

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.