Having active tabs in websites help in usability for it shows where the person currently is. For that to happen, we should make it a point that the active navigation and the rest of the body have connection to one another. (See this blog and Last Leaf as examples.)

Doing this in Wordpress is quite easy, you only have to be familiar with the very basic if and else PHP statements. Let’s go to the coding!

<ul>
    <li class="home<?php if(is_home()) {?> active
       <?php } else {} ?>">
    <a<?php if(is_home()) { ?>
       <?php } else { ?> href="<?php bloginfo('URL'); ?>">
       <?php } ?>>Home
    </a></li>
  </ul>

I would have added several list items as well but, well, it may look confusing. Anyway, this single example is enough (I think) to show how it’s done — if you still don’t know how that is.

Let’s dissect the code:


<li class="home<?php if(is_home()) {?> active<?php } else {} ?>“>


This code means that if the current page is the home page then it should also show the class “active” otherwise, “home” class is enough. The active class is important because this will make the active tab for that particular link item.


<a<?php if(is_home()) {} else { ?> href=”<?php bloginfo(’URL’); ?>”><?php } ?>>Home</a>


Now this code means that if the current page is the homepage then it shouldn’t display anything within the <a> tag otherwise, it should be linked to the blog’s URL specified by this bit bloginfo('URL');.

The idea here is that if you are on the current page, the user should not be able to click on a link that will bring them back to that very same page they are on as it is a usability issue as well (see “Where Am I?” by Derek Powazek).

For the archives, this is what I have:

<ul>
    <li class="archives
       <?php if(is_single() || is_archive() || is_page('1')) {?>
       active<?php } else {} ?>">
    <a<?php if(is_single() || is_archive() || is_page('1')) { ?>
       <?php } else { ?> href="<?php bloginfo('URL'); ?>">
       <?php } ?>>Archives</a></li>
</ul>

The idea in this one is to define the pages that should be under Archives and that includes the single post, monthly archives, category archives and your archives page — if you have one. I think it is good practice for you to define your page in ID instead of the page’s title because if you’re anything like me, you might feel the urge to change the title every now and then but the ID remains the same. That is one less thing to worry about for you.

Another thing I do is that I usually put this in a separate PHP file so I could easily call on this no matter what theme I use. I assume that your site’s navigation will not change overnight so having it in a different file and just adding an include where you want to show it is fine. Plus, your header file (or sidebar) will look less cluttered and you will be able to identify which is which. A note though, make sure that the list item is all in one line, PHP code and all so the result will be something like the one below:


<li class="archive active"><a>Archive</a></li>

Easy isn’t it?! Make your site look good and usable.

Edit (Aug. 12, 2007) — added the missing apostrophe as noticed by Adam C Thanks Adam!