Movable Type: Highlight the Relevant Category for the Current Entry in Your Category Listing

Ever since I saw how Doug Bowman implemented this technique on Mighty Goods (in this example, see how the category you’re in looks different to the others in the category listing) I’ve been wanting to add this feature to my site.

Problem was, I didn’t have a clue how to do it! I knew that I needed some kind of if/else functionality, but wasn’t aware of any plugin that could do this.

Nor could I find any reference to how to do this on the web (i’m sure that was more than partly due to the fact that I had no idea what to search for – would you?).

Fortunately, I recently came across the Compare plugin, which finally provided me with the extra tags I needed.

Compare to the Rescue!

Note: you’ll need to install the Compare plugin for this code to work.
Basically, the code below checks to see if the name of each category is the same as the primary category assigned to the entry.

If it is, then that list item is given a class of “on” and the appropriate styles are applied.

If the two are not the same, then the regular list item code is written. Simple, eh?

<ul>
<MTCategories>
<MTIfEqual a="[MTCategoryLabel]" b="[MTEntryCategory]">
<li class="on"><a href="<$MTCategoryArchiveLinkgt;" title="<$MTCategoryDescriptiongt;"><MTCategoryLabel> </li> </MTIfEqual> <MTIfNotEqual a="[MTCategoryLabel]" b="[MTEntryCategory]"> <li><a href="<$MTCategoryArchiveLinkgt;" title="<$MTCategoryDescriptiongt;"> <MTCategoryLabel></a></li> </MTIfNotEqual> </MTCategories> </ul>

Being the cutting edge designer that I am, I made the on-state for my list item display the text in bold. Nice.