Creative Ways To Use Subcategories

Create a “Breadcrumb” Trail In Movable Type Using Subcategories

Quandary: Someone clicks on a subcategory archive, but it looks just like every other category page. How can we give the user a better sense of context for the subcategory pages?

Solution: Breadcrumbs! You know, they look like: Category » Subcategory , with links that let us get around a complex hierarchy pretty easily. Put this code where your category title gets displayed:

<mt:HasParentCategory>
    <mt:ParentCategories exclude_current="1">
        <a href="<mt:CategoryArchiveLink/>"><mt:CategoryLabel /></a>
    </mt:ParentCategories>  »
</mt:HasParentCategory>
<mt:ArchiveTitle />

Essentially, we check to see if the category page we’re on has a parent. If it does, we append the title with that parent category name (exclude_current hides the subcategory we’re in) and link so the user can jump back pretty quickly.

Display Subcategories As A Menu On A Category Archive Page

Quandary: You got several categories with subcategories, and you’d like to show these subcategories as a menu on the parent category archive page.

Solution: This is a little tricky because all subcategories are categories too. So you have to think more in terms of relationships to tackle this one. Here’s the code:

<mt:HasSubCategories>
    <ul>
    <mt:SubCategories>
        <li><a href="<mt:CategoryArchiveLink/>"><mt:CategoryLabel /></a></li>
    </mt:SubCategories>
    </ul>
</mt:HasSubCategories>

<mt:HasParentCategory>
    <mt:ParentCategories exclude_current="1">
        <mt:HasSubCategories>
            <ul>
            <mt:SubCategories>
                <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a></li>
            </mt:SubCategories>
            </ul>
        </mt:HasSubCategories>
    </mt:ParentCategories>
</mt:HasParentCategory>

The first chunk says, “If this category has subcategories (children), then run through the list of them and create a menu.” This part targets the parent category pages, because they have children.

The second chunk is similar, but it’s meant for the subcategory pages themselves. This code says, “If this category has a parent category, then give us a list of subcategories (children) that belong to that parent and make a menu.” Since Movable Type doesn’t have any type of sibling tags, we have to go back to a parent if it exists and then display that parent’s children (those are the siblings).

  • posted on 9 September 2007
  • by Jesse

InterAction:

19 February 20091. Josh Rubin:

This is really helpful, thanks! I'm still struggling with an issue and would love any insight you can offer.

I have three levels of categories, let's call them Main, Subcategory and Section. Ever Main category has Subcategories and some Subcategories have Sections. The hierarchy looks something like:

Main
Subcategory
Section
Section
Section
Subcategory
Subcategory
Section
Section
Subcategory
Main
Subcategory
Subcategory
Section
Section
Section
Section
Subcategory
Main
Subcategory
Subcategory
Section
Section
Subcategory
Subcategory
Subcategory
Section
Section

When viewing any listing page I want to show the Subcategories that correspond to that page's Main category. Easy enough. When viewing a Subcategory's listing page I want to show that Subcategory's Sections nested in the menu below the active Subcategory. This display should also apply when viewing the Section's listing page.

I have tried the following, but the result is that the Sections list for all Subcategories and the Section's listing pages don't show the parent Subcategories:





  • class="firstEntry">">





  • class="selectedItem">">



  • ">









I have also tried this, but the Sections are listed outside of their parent Subcategory and can not be styled differently:


Fiduciary Trust International



  • class="firstEntry">">


















Any ideas??
Thanks!
Josh


YourThoughts?



GetUpdated

ElseWhere

Find me on aim Find me on delicious Find me on digg Find me on linkedin Find me on pownce Find me on twitter Find me on youtube Find me on skype Find me on facebook Find me on livejournal Find me on msn Find me on vox Find me on technorati Find me on yahoo Find me on dopplr Find me on lastfm

ActionStream

  • Jesse said, "Party at Liane's Place http://flic.kr/p/6BGZWy" Jesse said, “Party at Liane’s Place http://flic.kr/p/6BGZWy” 2009-07-03T23:10:19Z 2009-07-03T23:10:19Z
  • Jesse said, "I'm considering a new motto: "Your trouble ticket is my command."" Jesse said, “I’m considering a new motto: "Your trouble ticket is my command."” 2009-07-03T17:55:11Z 2009-07-03T17:55:11Z
  • Jesse said, "@kimonostereo Vibrant Ink: http://tr.im/qMSj" Jesse said, “@kimonostereo Vibrant Ink: http://tr.im/qMSj” 2009-07-03T17:49:51Z 2009-07-03T17:49:51Z
  • Jesse saved Nearest Tube Augmented Reality App for iPhone 3GS from acrossair as a favorite video Jesse saved Nearest Tube Augmented Reality App for iPhone 3GS from acrossair as a favorite video 2009-07-03T16:00:06Z 2009-07-03T16:00:06Z
  • Jesse said, "And if you haven't yet, download and read through Jon Hick's Icons for Interaction presentation. Pure gold. http://tr.im/qLKK" Jesse said, “And if you haven’t yet, download and read through Jon Hick’s Icons for Interaction presentation. Pure gold. http://tr.im/qLKK” 2009-07-03T15:06:11Z 2009-07-03T15:06:11Z