Design-Website « Starising.net

WordPress Category Template

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?”

Custom Home Page for WordPress

By default, WordPress calls the index.php as the home page.

To override the default, I use the home.php instead.

Index.php and Home.php – which is better?

I can’t tell which made a better home; to me it’s a matter of preference.

When using the index file as the home page, I usually set posting to 3 so that it will not stretch too deep down making reading difficult and loading slower.

Or if I remembered to insert “more” to the posting, then maybe 5 to 7 postings per page would provide a quick glance for any first-time visitors.

Using home.php allows me to customize it to anyway I like without affecting the rest of the template.

As in this case, I want the home page to adopt the 1-column look so that it is identical to the web, while the rest of the blog’s files I could have a 2-column template.

I am not sure if it’s alright to leave index.php in the folder.

Can index.php and home.php coexist? I really have no idea.

But having index.php in the folder serves as a backup in case other files needed are not present.

Page Title

The home page displays the blog whereas the single file displays the post title.

While I love the way the blog is being displayed, I would prefer the title to show my Site Concept Keyword – Make Your Own Website.

In order to effect this change, this is what I did to the header.php

I changed the default line of:

<title><php wp_title('«', true, 'right'); ?> <php bloginfo('name'); ?></title>

to :

<title>Starising - Make Your Own WebSite</title>

In short, it means removing the php code and manually insert a title of my choice to the title element.

Having done that, I can no longer named this header.php or every page will display the same title.
So I named this header-home.php

And over at home.php I changed the include code:

<?php get_header(); ?>

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

header-home.php

So now I have a new file with only 1 line changed.
Is it worth the effort? Not now…

At a later stage, I would be able to make other changes to the header of the home page especially the setting for the horizontal menu at the header bar.

Make Your Own Weblog

All ‘Design-Website’ Postings