How to Display Blog Archives in Grid Format


“How can I display my WordPress archives in a grid format?” That’s a question I see asked over and over in various forums. Usually, our first impulse is to start scoping the WordPress plugin repository for a ready-made solution. We may even get lucky and actually find a plugin to help us get the job done. Here are a few examples I found on a quick search…

But, depending on which pages we want our grid-view, and how we want our content displayed, these plugins may not cut it. So we may just wind up touring the repository with nothing much to show for it in the end (except maybe an empty coffee pot).

Here’s another really easy way…

The easiest way to display multiple blog post excerpts on blog-view or archive pages is with a bit of very basic CSS. The advantage of this method is that it simply works. That’s because we – not the plugin designer – get to decide, and target, precisely what we want to display in a grid, and how we want to display it. Here’s how…

In a WordPress theme that follows standard structure, we simply need to style a few standard elements. These are…

  • The post container div
  • The image or thumbnail tag
  • The paragraph tag
  • The post-meta container div

However, if we only style those elements in and of themselves, we’ll wind up styling every occurrence of them on every page… including single posts. We don’t want that. So, the trick is to make sure our CSS targets specifically our WordPress archive or blog-view pages.

Thankfully, WordPress takes care of that task for us. The body of each page on our blog or site is automatically identified with a number of CSS classes for just that purpose. The main class for our archive pages is, you guessed it, archive. For the blog-view page, it’s blog. So, following the same order as above, here’s what our CSS identifiers would look like:

  • .archive .post, .blog .post
  • .archive .post img, .blog .post img
  • .archive .post p, .blog .post p
  • .archive .post .post-meta, .blog .post .post-meta

The post-meta box

The first thing we may want to do is remove the post-meta box from our archive and blog-view pages, as it’s a bit much in a grid display. Simply copy the code below and paste it to your theme or child-theme’s style.css file. (If you are using a child of a theme from WPMUdev.org, you’ll likely want to add custom style rules to _inc/css/child-style.css instead.) Save your file and re-upload it to your theme.

.archive .post-meta, .blog .post-meta {
     display:none;
}

If your theme presents all the elements in the post-meta box in separate div containers, an alternative would be to hide everything except the “Comments” link, like below. Note that the container classes in your theme may not be exactly as shown in this example. Use your browser’s developer tools (like Firebug for Firefox) to find the right ones. You’ll likely want to remove any styling from the post-meta box too if only the “Comments” link is displayed.

.archive .post-date, .archive .post-categories, .archive .post-tags, .archive .post-edit, .blog .post-date, .blog .post-categories, .blog .post-tags, .blog .post-edit {
     display:none;
}
.archive .post-meta, .blog .post-meta {
     background:transparent;
     border:none;
     margin:none;
     padding:none;
}

Let’s start with a 2-column grid example

Below is the CSS needed to get the posts on our archive page into a basic 2-column grid layout like the image to the right. The background-color is there just so we can see our changes better; remove it or change it as needed. The min-height allows us to control the height of all entries and ensure a nice even layout (adjust if needed). Copy the code below to your stylesheet, then refresh your archive or blog-view page to see your new grid display. You may want to tweak a few things to get it looking just right on your site.

.archive .post, .blog .post {
     display:inline-block;
     vertical-align:top;
     width:45%;
     padding:1.25%;
     margin:1.25%;
     min-height:170px;
     background-color:#eee;
}

Notice that we’re using percentages for the width, padding and margin rather than fixed values in the declarations above. This is simply my personal preference, as it makes calculating the total width of all elements that much easier. In this example, the post width is set at 45%, with 1.25% padding all around and a 1.25% margin separating all elements. The total width for each adds up to 50%, so 2 columns equals 100% of the width of the content area as illustrated below. (If, for some reason, the 2nd column insists upon dropping itself below the 1st one, simply reduce the value for either the padding, the margin or the width until it pops into place.)

In a 2-column grid, you could likely leave the post image as-is, with the post excerpt wrapping around the image.

Note that for the archive and/or blog-view pages in many themes, the img tag is likely nested in its own div container. This div could be labeled with a class like post-featured-thumb or something similar. In the following examples, I’ve included a style rule to set that div to a width of 100% (100% of its parent container, which is our .archive .post div). Again, use your browser’s developer tools to find the corresponding div class in your theme/child-theme. If your post thumbnail is not wrapped in a containing div, you can omit that rule.

A 3-column grid example

In this example, we’re going to remove the text from the grid entries, and display only the post title and the thumbnail. Depending on your theme, the paragraph tag (p) for the post excerpt may be wrapped in div. Use the following code in this case, being sure to replace the div class with the actual class name of your div.

.archive .post-summary, .blog .post-summary {
     display:none;
}

If the p tag is not wrapped in a div, use this code:

.archive .post p, .blog .post p {
     display:none;
}

In the 2nd scenario, if the post thumbnail is contained within the p tag, you may need to add !important to the thumbnail style rules to ensure it displays properly.

Another thing we may want to do in grids of 3 or more columns is reduce the size of the heading to it fits nicely in a smaller box. Simply add the following to your stylesheet and adjust to taste. But check first to be sure if the heading tag is h1 or h2, h3, etc.

.archive .post h1, .blog .post h1 {
     font-size:1.5em;
}

Below is the CSS we need to set up our 3-column grid. You’ll notice that the only things that have changed from a 2- to a 3-column grid are the width and maybe the min-height rules.

.archive .post, .blog .post {
     display:inline-block;
     vertical-align:top;
     width:28%;
     padding:1.25%;
     margin:1.25%;
     min-height:190px;
     background-color:#eee;
}

Want a 4-column grid?

The only things that need to be adjusted are, you guessed it, the width and min-height as below.

.archive .post, .blog .post {
     display:inline-block;
     vertical-align:top;
     width:20%;
     padding:1.25%;
     margin:1.25%;
     min-height:140px;
     background-color:#eee;
}

Whether you opt for a 2, 3 or 4-column grid, don’t hesitate to adjust the width, min-height, padding and margin to suit your taste and your site. Remember also that with a bit of experimentation, the font-size for the post heading can be set just right. As is the case for the post thumbnail.

I hope you find use for this little tut. And as usual, if you need help with any part of it, don’t hesitate to leave a comment below. Thanks for reading!

Related posts:

  1. Display WordPress Categories in a Fancy Grid Style Gallery Want to do something a little more creative with your…
  2. Daily Tip: How To Display WordPress Archives in a Drop Down Menu Sometimes you don’t want your archives taking up so much…
  3. Show Me the Numbers: 7 Handy Hacks to Display Your Best Numbers on Your Blog Information is power, and knowing is half the battle. There…