Much of designing time were spent on the header of this template.

The horizontal navigation is on the header and I want both the web and the blog’s header to look exactly alike.

Since the web’s header is done, what next is to customize the blog’s header.

Method 1 – Default

By default, WordPress uses archive.php for all categories archive.
But I won’t be able to achieve the same effect as the web’s header.

Over at the website, I could include a different header for each category.
By having a different color and having the underline and link removed, the visitors would know which category they are at.

Method 2 – Customize

With WordPress, it’s something I’ve never done before.

I read the Category Template of the WordPress documentation and other related docs to have an idea on how I could achieve this.

2 things to do:

• Find out the ID of each category
• Create a template for each category

WordPress Version 2.9 allows the use of category-slug. That means I could create the 4 category files as:

1. category-create-website.php
2. category-build-website.php
3. category-design-website.php
4. category-promote-website.php

Category-ID

But since I tested the template by naming it category-15.php and it worked, there’s no need to test another method.
To obtain the category id, I just need to log into the admin area and do a mouse over each category created at the category creation area. The id will be reflected on the status bar.

With the category id on hand, I copied everything from archive.php and saved them as:

• category-15.php
• category-16.php
• category-17.php
• category-18.php

The effect of “here” is done over at the header file.
I could save 4 header files, each for a category and include the header from the category file:

<?php include (TEMPLATEPATH . '/header-create.php'); ?>

The other method is to copy all the codes from the header file and paste them onto each category template file.

This is the only part on the header I need to edit for each category template to achieve the similar effect as the web’s horizontal menu.

Like for create-website category, this is how it would look like:

<div id="head-menu1">
<div id="t1">
<ul>
<li><a href="http://www.starising.com">Web</a></li>
<li class="heret1">Make Your Own Website</li>
<li id="t11"><a href="http://starising.net">Blog</a></li>
</ul></div>
<div id="t2"><ul>
<li class="here">Create Website</li>
<li><a href="http://starising.net/category/build-website/">Build Website</a></li>
<li><a href="http://starising.net/category/design-website/">Design Website</a></li>
<li><a href="http://starising.net/category/promote-website/">Promote Website</a></li>
</ul></div>
</div>

Category Template Done

If you are new to WordPresss template, you may not be able to understand this.
I’ll explain further in details when I touch on designing a WordPress template.

This post serves as a record of what I’ve done to achieve this effect.
I remember better if I succeeded only after a few attempts.
Sometimes, a lucky one-time-through saves time, but we didn’t learn much.

Without this record, months later, I’d be asking myself, “How did I do that?”