In this tutorial, i’ll provide several different methods which enable you to display any type of posts archive in columns.
You can use the CSS rules in any theme however you may need to modify it slightly.
CSS Grid
CSS Grid enables you to use percentages, pixel values or fractional units fr like you see in the following CSS rule.
.content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
The above CSS generates exactly what you see in the following screenshot.
The above CSS rule can also be written using the repeat() CSS function like this :
.content {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
You can also write the CSS using percentages like this :
.content {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-gap: 20px;
}
And, you could also uses pixel values.
Media Queries
You can use the following CSS rule which displays each post ( grid item or fractional unit ) in 1 column on smaller screens
@media only screen and (max-width: 960px) {
.content {
grid-template-columns: 1fr;
grid-gap: 0;
}
}
Other Methods
The following methods control the width of the .post class. You can also use these CSS rules with the .entry class or filter the post class and add your own custom class.
Here’s an example showing a category archive page displaying 3 columns of featured images using the content sidebar layout in Genesis.
Here’s the code which makes the above happen:
.archive .post {
display: inline-block;
width: 33.333333333333%;
padding: 1%;
}
.archive .entry-meta,
.archive .entry-title,
.archive .entry-header:after,
.archive .entry-content p {
display: none;
}
.archive
class.Some themes will need the padding and some will not so you can remove it in this case.
Here’s what the Columns look like using the full width template for the Twenty Fourteen default theme for WordPress.
Here’s the CSS code:
.archive .post {
display: inline-block;
width: 28%;
padding: 2%;
}
.archive .entry-meta,
.archive .comments-link,
.archive .entry-content p {
display: none;
}
.archive .entry-title {
font-size: 25px;
}
Here’s the result of using the CSS code below and full width layout option on the News Pro theme by StudioPress:
And here’s the code you’ll need to add to your child themes style.css file before the start of the Media Queries.
.archive .post {
display:inline-block;
width:33.333333333333%;
}
.archive .entry-meta,
.archive .entry-title,
.archive .entry-header:after,
.archive .entry-content p {
display: none;
}
4 Column Grid
Here’s another way to create archive page columns for your featured images using a different CSS method.
.archive .post {
float: left;
width: 25%;
}
.archive .post:nth-of-type(4n+1) {
clear: left;
}
.archive .entry-meta,
.archive .entry-title,
.archive .entry-content p {
display: none;
}
And here’s the result tested on Genesis:
Different Themes – Code Variations
Clearly, different themes are coded different with different values for different classes.
You’ll notice in the Twenty Fourteen themes CSS that i have added a value to change the entry title. You will need to customize this value as all titles are different lengths which may mess up the display. Or you can simply hide the titles altogether in most themes.
The CSS will also be different on some themes depending of whether you use the full width layout or content sidebar layout so you will need to modify the code based on which theme you’re using.
Media Queries are not included in this tutorial.
André says
Brad Dalton,
I´m using WordPress 3.9 – Modern Portfolio Pro Theme
i´ve tried to find where can paste the code, but no had idea…
http://my.studiopress.com/themes/modern-portfolio/
tania says
Hi,
Should say on the home page using featured-content /not posts!
T
Brad Dalton says
Thats not what the solution provides. It assumes you are using the normal archive page loop.
Tania says
Thanks. Was trying to find basic CSS coding to create columns (genesis) for featured posts and this seems to be the closest I could find. So as a stating point as you mentioned archive becomes home and I guess .post becomes .featured-content and so on?
.home .post {
display: inline-block;
width: 28%;
padding: 2%;
}
tania says
Hi,
How do you do this on a home page with posts?
T
Brad Dalton says
Use .home as your class rather than .archive.
mel says
hi brad,
have you done tutorial for NEWS PRO:….. create FULL WIDTH header?
thx
mel
Brad Dalton says
Try this:
Krystyn says
Thank you for this. Any suggestion how to get the image to be above the post title? Right now I’ve got the post title coming first, then the image..I’d like to reverse it.
Brad Dalton says
Use this and change the hook position and 3rd parameter.
You could also add the code to a custom category archive template.
The archive-portfolio.php template in Executive Pro would be the best to copy.
Krystyn says
I feel like I’m missing something. I’ve copied the archive-portfolio.php template over from executive pro and renamed it category.php. I renamed all references from executive to Beautiful.
Now, how do I get a category to actually use that template? Make a page called “category #1”, but I can’t change the post type to “category” so how do I get it to populate the posts from category 1? What am I missing?
Brad Dalton says
No need. WordPress will use it because of the template hierarchy in this order of priority.
Template file used to render a Category Archive Index page
1. category-{slug}.php – If the category’s slug were news, WordPress would look for category-news.php
2. category-{id}.php – If the category’s ID were 6, WordPress would look for category-6.php
3. category.php
4. archive.php
5. index.php
Name it category-slug.php replacing slug with the category i.d or name for your category if you only want it to replace one category archive page as shown above.
You might want to remove some of the code inside the file if its the archive-portfolio.php template.
Krystyn says
Also, if I’m going to do the same thing across the board for the categories, why do I need the custom page, if just the css works?
Brad Dalton says
You don’t.