How to Easily Create Super Cool WordPress Category Pages

How to Easily Create Super Cool WordPress Category Pages

How important are the category pages on your site? Are they just an afterthought? Are they drab and lackluster? Admit it — could they be a lot more valuable (to both you and your visitors)? Couldn’t they be a lot cooler too, like this guy below?

Continue reading, or jump ahead using these links:

The Default Drabness

If you’re like most people, then your category pages are probably in the exact same condition they were in on the day you started your site. More than likely they’re just a list of links to your posts with either an excerpt or the full post showing.

Maybe they look something like this category page using the default Twenty Twelve theme.

Taking Category Pages Seriously

But what if you took more care with your category pages? What if you made them more like introductions to the subject at hand — i.e. the topic of your category?

Instead of the default list of links, what if you had a category page that looked like this?

Or even this simple version?

Wouldn’t that serve your visitors better? Don’t you think it might even be something you could use to attract links and search engines?

How to Spruce Up Your Category Pages

The examples above were just some quick mockups to show you some possibilities. You could easily make something similar (or better) yourself, and in this post we’re going to show you how.

When you set up or edit a category in WordPress, you may not have noticed that there is a “Description” box there.

Most themes are already set up so that whatever you write in that description box will get printed at the top of the category page.

If your theme doesn’t do that, you can easily enable that by placing the following code in your category template page. (Appearance > Editor > Category Template – category.php … If you have no category.php file in your theme, look for archive.php.)

<?php echo category_description( $category_id ); ?>

Super Charge Your Category Pages

While the category description boxes will accept HTML, and that will allow you to do some cool things, there’s an even better way to supercharge your category description – use a plugin called CategoryTinymce, and it will put a WYSIWYG editor into the place of that description box.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

The WYSIWYG editor will let you easily style the description area of the category page to look however you like. And one of the best things about it is that it will let you easily insert shortcodes provided by other plugins.

So, for example, you might insert a slider at the top of the page with a shortcode from a slider plugin. You might put in a set of tabbed sections with a plugin as I did in the example above.

The description area taken from the original example.

In that same example, you might notice that beside the tabbed section is a section of text. I was able to get these two different elements to sit side by side by using shortcodes for columns and dividing the area up into a two-thirds section (for the tabs) and a one-third section (for the text).

Below that section, of course, I inserted a photo gallery. You can also insert images and videos and links and go crazy with all the text you like.

With a little bit of imagination, you could really make your category pages true landing pages for the content in that section. And on top of that, it could greatly improve the SEO for those pages.

Very Important Notes

1. Shortcodes

For some reason, some shortcodes (including photo galleries) don’t seem to work in the editor. But there’s a solution for that.

Place the following line of code in your functions.php file. (Appearance > Editor > Theme Functions – functions.php)

add_filter( 'category_description', 'do_shortcode' );

Another possible issue is that some shortcode buttons won’t show up on the editor when they’re supposed to. If this happens, you can just open up a new post and do your setting up there, then copy and paste the code into the editor for the category descriptions.

2. Multiple Category Pages

One thing about category pages is that once you get a number of posts on them, they will cut the posts off and create a second page, then a third, and a fourth, etc. The problem here is that your “category description” will also repeat on each of those pages. You may not want that (especially for SEO purposes), and so there’s something you can do to prevent it.

Open up your category template, and place the code that calls your category description into the middle of the code below. (Appearance > Editor > Category Template – category.php)

<?php if (!is_paged()) {?>
Insert category description code
<?php }?>

Remember we said the code to call your category description in looks like this:

<?php echo category_description( $category_id ); ?>

But the truth is it may be slightly different in your theme, but it should look somewhat like that.

In the default Twenty Twelve theme, for example, it was slightly different. It looked like this:

<?php if ( category_description() ) : // Show an optional category description ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>

And so I took that whole section and put it into the code mentioned before. Here’s what the whole thing looked like:

<?php if (!is_paged()) {?>
<?php if ( category_description() ) : // Show an optional category description ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
<?php }?>

3. Tags Too

And finally, the last important note – this works for tags too! So if you have important tag pages that you’d like to highlight, go crazy.

Photo credit: Rollan Budi

Tags: