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:
- category-create-website.php
- category-build-website.php
- category-design-website.php
- 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?”