This tutorial enables you to do add the Twitter Bootstrap column classes to Twenty Fourteen to display your posts in columns on any archive pages.
There’s 2 steps involved:
- You need to add the Twitter Bootstrap CSS to your child themes style.css file
- And then add the PHP code with the post class filter to your child themes functions file
Twitter Bootstrap Column Classes
Here’s the code for displaying your posts in 2 or 3 columns.
Archive Posts In 2 Columns
Here’s the result on a category page using Twenty Fourteen
Archive Posts In 3 Columns
Here’s the result on a category page using Twenty Fourteen
You will also need to add a tiny bit of CSS to your style sheet to fix the pagination styling:
.archive .paging-navigation {
border-top: 5px solid transparent;
margin: 48px 0;
}
Mobile Responsive?
Gulp! No. This solution is NOT mobile responsive unless you add Media Queries to re-size the CSS columns on smaller screens.
The easiest solution is to use the CSS for the Media Queries from any Responsive StudioPress Pro theme which uses the exact same column classes from Twitter Bootstrap. Then its simply a copy and paste job.
Otherwise, you can write the CSS yourself.
Was This Tutorial Helpful?