Twenty Fourteen – Filter The Post Class With Column Classes On Archives

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:

1. You need to add the Twitter Bootstrap CSS to your child themes style.css file
2. 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.

More of the Same

• Display Posts In Columns On Genesis Archive Pages