Feeds

Make Your WordPress Category or Tag Pages More Interesting

Submitted by Ryan Caldwell on April 7, 2008 - 10:58am in

By default, most WordPress themes come out of the gate with really boring Category and Tag pages. Most of the time they are just bland lists of posts in temporal order.

Over at PopCrunch, thanks to the prodding of my good friend Ahmed Bilal, I've decided to spice up the category pages a bit to make them look more professional and presentable (yes, Ahmed, the new site design is coming soon;-)

So some of my friends noticed that the category pages over at PopCrunch were ranking for very popular search terms like "Britney Spears" but that the page that visitors were presented with was butt ugly and completely non-sticky. In other words, people might find the page, but there was nothing captivating about it at all to make people stay.

So the first step in my adventure was to prettify the page a bit. To do this, I downloaded the Category Icons plugin for WordPress. Category Icons allows you to associate a unique image with each of your WordPress categories. By placing a little snippet of code on your category.php theme file, you can then have a big, bold image come up that will make your category pages look better than 90% of the category pages out there.

But I wanted to do more than add a simple image. While an image ads visual impact, my vision for each major category was to create something like an "expert hub" - to give visitors something more than a list of articles.

So the next thing I did was use the category description field for some of my major categories to write up a few descriptive (and hopefully witty) paragraphs about the category topic. I then displayed this descriptive paragraph at the top of my category pages. In addition to create unique editorial content, this step also introduces permanent, static content which helps stabilize the indexing of the category page in the search index. Dual benefit. Two birds with one stone.

But I didn't want to stop with just a picture and a short editorial bit. The next step I took was to link to the three best articles on PopCrunch about the category topic. By doing this I help the reader find the most interesting content first. There are several options here. I personally chose to go the manual edit route. However, you could easily use the Popularity Contest plugin and have an algorithm decide your best content.

So far, that's all I've done to improve my category pages. And so far, I'm very happy with the results. You can see an example of how things are going at the Britney Spears Category page.


Wow! The page actually looks

Wow! The page actually looks really interactive and "it begs to be read" :)
can you by any chance share the coding you used to pull the category description? thanks!

Coding To Show Category Description

Hope you find this useful ...

1) You need to have a separate page for categories in your theme (category.php)
If you do not have a category.php make a copy of your index.php and rename it category.php.

2) add

<?php
echo category_description();
?>
to category.php where you want the category description to show (This should be outside the 'Loop', if you do not know what this means start by putting it at the top of the page, save, upload and refresh to see what you have and if it is not in the right place you can move it down adn do the same.

BONUS - If you only want to have the description on the first page of the category you need to add the php code to show the category into it's own 'Loop' like this;

<?php
if ( $paged < 2 ) {
?>

<?php
echo category_description();
?>

<?php
} else {
?>

YOU CAN CHANGE THIS LINE TO WHATEVER YOU LIKE AND THIS WILL ONLY SHOW ON P.2 OR HIGHER

<?php
}
?>

Don't forget that you will probably need to amend your css stylesheet to incorporate a style for your category description.

BONUS 2 - The php code to display the category title is

<?php
single_cat_title
();
?>

Thats good that there are

Thats good that there are ways to make categories more interesting, wordpress is very elastic and you can do mayn things in it.

Thanks for the help!

Thanks to Ryan and Kelly for showing me how to make the categories different and more unique in their content, the Britney Spears category certainly improves the normal category layout - both for readers and search engines.

I've just started to implement the category alterations after reading this and it should all go well after all the mod's I've been trying to sort today.

Thanks again to the both of you, you've now given me a new (to me) blog to read from start to finish!

-Dan

Great solution Ryan. The

Great solution Ryan. The Category Pages plugin allow you to do kinda the same thing.

The benefit would be to have the page editor interface to be able to use HTML tags like bold and italics and insert links and images as well.

Configuring category icon plugin

How do you get your britney spears image to align right. I see you've got align=left etc in you HTML rather than using CSS. How did you do this (ie what code did you type in your category.php file or wherever you did it). I've been mucking round with the CSS and can't get it to go where I want! Thanks.

Thanks for the heads up.

Thanks for the heads up. I've already been utilising category descriptions on most of my wordpress powered sites, but the images function will be handy on some sites too.

That

should have said align=left of course. But this is driving me mad! Does anyone know what should be in my php to get the text to wrap round the picture? I'm currently using this, but it keeps putting the image on a new line ...
`

<?php
if (function_exists('get_cat_icon'))
get_cat_icon('');
?>

<?php
echo category_description();
?>

`

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <h2> <h3> <h4> <img> <div> <a> <em> <strong> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <span> <table> <td> <tr> <caption> <th> <hr> <pre> <br> <p> <object> <param> <embed>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1 + 3 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.