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(); ?>
  • ` <div class="row">` keep it outside of while – BlueSuiter Apr 24 '17 at 10:57
  • Great, cheers...all sorted. – Tracy Apr 24 '17 at 11:37
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(); ?>
| improve this answer | |
  • This is perfect cheers! I knew it would be something simple :) – Tracy Apr 24 '17 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.