Using the Category-Icons plugin and Thematic to create custom category pages

I am working on a website redesign project for a company that has a need to display several thousand products on their site. One of the main goals with this redesign was easier navigation for the end user. This post will focus on only one aspect of this new navigation. The display of categories.

The desire was to display these product posts and their categories like an online catalog without the need for e-commerce capability. This meant that the categories needed a more visual display instead of a standard list, and this needed to be included on category archive pages. To achieve this, I turned to the Thematic theme framework, category page templates, and most important for my visual layout, the Category-Icons plugin by Sub.

Creating Category Page Templates

The first thing I did was create category page templates. There were two reasons for this:

1. This site has 85 seperate categories and several category archive pages needed different descriptions at the top of the page.
2. Each category archive page needed a different loop to pull in different categories of my choosing.

It couldn’t be easier to create category page templates really. Two simple steps:

1. Copy the category.php file from the main Thematic folder, put it in your Child Theme folder, and rename it using the ID of the category you want to use it for. Learn more here http://codex.wordpress.org/Category_Templates
2. That’s it, you’ve just created a category template page. Now you can edit this page to include content specific to that category.

Here’s a quick example. I have a category named Bath. This category has an ID of 62. I copied the category.php file into my Child Theme folder and named it category-62.php. Now everytime the Bath category archive page loads, it uses the category-62.php file instead of the category.php file.

Adding Custom Content to Category Page Templates

Now I needed to change the content for the Bath category page, so I dove into the template and placed some descriptive content at the top:

You've spent hours pouring over magazines to find the perfect design for your new
spa-like bathroom retreat. You've chosen the perfect tile, the whirlpool tub,
beautiful faucets and luxurious shower sprays.

Notice the ascii code in there? I had to use that for the apostrophe’s in order for the page to render correctly. But I digress…

Now for the really cool part. Changing the category loop to pull in the categories of my choosing and to display the icons I assigned to these categories using the Category-Icons plugin. (I’ll go into more detail about this plugin in a future post).

<!--?php //Bath Cats //Create a variable with category IDs. These can easily be changed anytime. $ftchildcats="69,71,77,75,67,116,72"; ?-->

<!--?php <br ?-->//Creating my own ul class for styling these category listings
echo "</pre>
<ul class="ft-category">
<ul class="ft-category">";</ul>
</ul>
&nbsp;
<ul class="ft-category">
<ul class="ft-category">//Checking to see if the Category-Icons plugin function exists</ul>
</ul>
<ul class="ft-category">
<ul class="ft-category">if (function_exists('put_cat_icons'))</ul>
</ul>
&nbsp;
<ul class="ft-category">
<ul class="ft-category">//If it does exist, display the Category-Icons along with the category titles</ul>
</ul>
&nbsp;
<ul class="ft-category">
<ul class="ft-category">put_cat_icons( wp_list_categories('title_li=&include=' . $ftchildcats . '&echo=0'));</ul>
</ul>
&nbsp;
<ul class="ft-category">
<ul class="ft-category">//If the Category-Icons plugin is broken, or doesn't exist, just show the full category list</ul>
</ul>
&nbsp;
<ul class="ft-category">
<ul class="ft-category">else</ul>
</ul>
&nbsp;
<ul class="ft-category">
<ul class="ft-category">wp_list_categories('title_li');</ul>
</ul>
&nbsp;
<ul class="ft-category">echo "</ul>
<pre>
;
?>

The output looks like this:

Of course this is only one of the methods you can use with the Category-Icons plugin. You can learn more here.

If you’re using this plugin, please post a link so we can all have a peek.