Building a Rad Overview Page that Lists Posts for Every Category

Building a Rad Overview Page that Lists Posts for Every Category

When you have a lot of posts on your site, it’s hard for your visitors to get a good bird’s eye view on everything.

Of course they can probably easily see your categories, maybe your latest posts, and other typical navigation you might supply.

But that still doesn’t let them quickly scan down through a much wider range of your content. It doesn’t give them a 40,000 foot overview for your whole site.

feature-overview

Getting the Overview

With this post, we’re going to address that. We’re going to build a page users can go to in order to quickly look through your site’s content at a glance. A sort of “site map for humans” is what we’re after, a kind of table of contents.

What comes to mind for me when I think of such a set up is the site Alltop – Guy Kawasaki’s curated news/feed reader site. It looks like this:

alltop

List Category Posts Plugin

The easiest way to achieve what we’re aiming for is to use a few plugins. First up is a plugin called List Category Posts.

This plugin offers you a crazy amount of control in terms of pulling in posts, and you can certainly use it to do much more than we’re using it for here.

Let’s go over a basic example first, and then we’ll move into incorporating other plugins and getting a little more creative.

Create a Page

For our purposes, you’ll want to create a new Page for your Overview/Table of Contents page.

After installing and activating the List Category Post plugin, you can put shortcodes into that page that calls in posts from different categories.

For example, let’s say you wanted to list every post on your site organized by categories.

Go to the settings page for the plugin, arrange the settings for no limits on the post number, and then begin inserting shortcodes (and titles above them) for each category, something like the following:

<h2>News About This </h2>
[catlist id=1]

<h2>A Little More Here</h2>
[catlist id=2]

<h2>Some XYZ Stuff</h2>
[catlist id=3]

<h2>Bit By Bit</h2>
[catlist id=4]

(Note: You can also use the category names instead of the category ID.)

When you do that, you’ll get a nice list of all your posts on the page, divided by categories like this:

single-category

Spicing Things Up

As you might imagine, such a page would be very valuable to many visitors. It would allow them to get a good idea of all the content on your site very quickly.

But while that approach above is valuable, it could perhaps look a little nicer. For example, instead of just having one column of links all the way down the page, you might have two or three columns, as Alltop does.

Of course in order to get things to evenly display like Alltop, you’ll need to limit the number of posts for each category to, for example, the last five posts. And you can easily do that in the plugin’s settings or via the shortcodes themselves.

Setting Up Links in Columns

In order to get our columns set up, we’re going to combine the plugin above with the Column Shortcodes plugin.

As you might imagine, this plugin will let us set up different columns within a page – for example, dividing the page equally into two columns (50/50), or maybe unequally into two columns (66/33), or maybe equally into three columns (33/33/33), etc.

In short, you can break a page up pretty much however you’d like.

After you have your columns set up with the shortcodes from the Column Shortcodes plugin, you just insert your titles and shortcodes from the List Category Posts plugin into the middle of the column shortcodes.

Below would be an example. I’m dividing my page up into two columns (and giving them some padding so they don’t run together).

[one_half padding="0 10px 0 0"]
<h2><strong>News About This</strong></h2>
[catlist name="News"]
[/one_half]

[one_half_last padding="0 0 0 10px"]
<h2><strong>Some XYZ Stuff</strong></h2>
[catlist name="XYZ"]
[/one_half_last]

And here’s a look at how that turned out (although I’ve got four categories below but only two in the code above — more on that later).

2-columns

And, of course, you can easily set up three columns too.

3-columns-2

I found that on a responsive theme, the columns easily collapsed and adhered to the responsive nature of the theme, so there was no problem there.

Using It As Your Homepage

Once you build this page, of course you can even use it as your homepage if you like. Just go to Settings > Reading > choose “A static page” and choose the Page you’ve made.

make-homepage

A Note on Design

If you divide your page up into two columns and put multiple categories in the first column, then put multiple categories in the second column, because some post titles are longer than others, you may find that the titles to your categories don’t exactly line up, as below.

uneven-titles

If you don’t care about that, then carry on.

However, if you want all your headings to come out evenly— i.e. lined up with each other—then you will want to put only one category in each column, and then create two new columns below that. Then create two new columns below that, etc.

Doing Even More

As mentioned, there are a crazy number of options you have with the List Category Posts plugin. This post hasn’t even begun to scratch the surface. You can see a full list here.

These other options will let you do things like pull in thumbnails if you like, pull in posts by author, pull in post only with certain tags (e.g. “spain”) or pull in posts from a certain category with a certain tag, e.g. all posts tagged with “spain,” but only in the “travel” category, not the “food” category or the “news” category, etc.

You’ll also want to read more on the plugin page about different styling options you have. Out of the box, your theme will control much of what goes on. However, you can override this if you know what you’re doing with CSS.

Building an Alltop Site for Yourself

If you wanted to build your own Alltop, you could.
If you wanted to build your own Alltop, you could.

As it may have already occurred to some, with a few more tools, you could even build your own Alltop style site.

It just so happens that WPMU DEV makes just the plugin you would be looking for – Autoblog. We have also previously discussed building a curated news site in another post.

With the information in that previous post, the Autoblog plugin, and the plugins mentioned in this post, you could surely do your own Alltop if you had the mind to. And good luck if you do!

Photo credit: mountains from sky