3-column-posts

Responsive 3 Column Posts in Category Page with WordPress and Bootstrap 3.0

Ever wonder of how to create responsive grid layout for your WordPress category page?
Medialoot explained this before in detailed way. But how to make a simple responsive category page that only has 3 column posts in WordPress using Bootstrap 3?
I simplified in a bit what Medialoot has explained in their blog and here’s how.

Just open your category.php or create any category template file if you want to have this layout to be only shown for specific category.

Let’s take a look of the code:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php /* Start the Loop */ ?>

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

<?php
//Set the initial count outside of the loop.
$count = (int)0;
?>

<ul class="thumbnails">

<?php
//Set the span to our default span12
$span = 'col-md-4';

//then reset the count to 0

if($count >= 12){
$count = 0;
}
//If its not 3 or higher, increase the count
else{
$count++;
}
?>

<li class="<?php echo $span; ?>">

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

<h1 >

<?php
$thetitle = $post->post_title; /* or you can use get_the_title() */
$getlength = strlen($thetitle);
$thelength = 23;
echo substr($thetitle, 0, $thelength);
if ($getlength > $thelength) echo "...";
?>

</h1>
<?php the_post_thumbnail( 'medium', array( 'class' => 'thumbnail' ) ); ?>
<div class="description"> <?php the_excerpt() ?></div>
</a>
</li>

</ul>

This code will result equal size of post thumbnails with each of their post title and description within 3 columns. Sometimes you need to limit the characters for the post title like I showed you in the code, because if not, the layout will not display in perfect rows and columns or can display something like masonry layout.

View Demo