WordPress: How to Loop for Custom Post Type Using Bootsrap

A simple little loop that loops through custom posts in WordPress and also shows how Bootstrap works alongside the custom post type loop. The example is used with 4 columns side by side (with col-md-3), but you can change the number to suit whether it is 2 columns, 3 or 4 etc.

Within the loop, you can change the ‘customposttypegoeshere’ to the name of your custom post type. The other parameters are customisable, i.e. define as many posts per page as you wish (here we are returning 24 posts), and you can also edit the orderby and order to suit.

Within the loop, we have chosen to display the post thumbnail, excerpt and title within each column, but these again can be removed or changed to suit your needs. Again, you can wrap the title in a H2 or H3 tag to suit.

<div class="container-fluid">

<?php 
$loop = new WP_Query( 
array(
'post_type' => 'customposttypegoeshere',
'posts_per_page' => 24,
'orderby' => 'date',
'order' => 'DESC'
)
);
?>

<div class="row">

<?php while ( $loop->have_posts() ) : $loop->the_post();?>

<div class="col-md-3 col-lg-3">

<img src="<?php the_post_thumbnail(); ?>" />
<?php the_title(); ?>
<?php the_excerpt();?>

</div>

<?php endwhile; ?>

</div>

</div>

If you need any help with Web Maintenance, Web Development Services or Website Security, get in touch with a member of our team and we will be happy to help.