How to List Drupal Child Terms on Taxonomy Pages with Views

I spent a good amount of time at Monday's evening to actually figure this out. In today's Drupal Tutorial - How to List Drupal Child Terms on Taxonomy Pages with Views.

This issue has been on my table for about two years.

For the ease of this tutorial - here is basic setup. For a content type blog I have created pre-defined vocabulary - Category. Most of the category items are not related and are in linear format. But few of them are related and I have listed them as child terms.

Pre-defined category in Drupal

Pre-defined category in Drupal

The tricky part is how to display child terms under parent taxonomy page - let's say a visitor is visiting parent category page - Tourism Objects and we would like to feature a little sub-menu with child terms, like airports, shopping venues e.t.c.

I tried many modules and solutions, but decided to stick with a simple views configuration using attachment feature.

Drupal taxonomy page views to list child terms

In following example I have actually extended a little bit usability by displaying count for each child term using aggregation.

Open your taxonomy/term/% view and add a new attachment.

Give it a nice name, Child terms, for example. 

Start by adding a contextual filter:

  • Taxonomy Term:Parent term
  • Provide default value: Taxonomy Term ID from URL
  • Load default filter from term page

Relationships:

  • Content: Taxonomy terms on node
  • Require this relationship

Other:

  • Use aggregation: Yes

Format:

  • Format: Unformatted
  • Show: Fields

Fields:

  • Taxonomy term (name)
  • Taxonomy term (tid)
  • Global: Custom

Paste following in Custom field:

<div class="tax-menu">[name] <span class="small"> ([tid])</span></div>

were tax-menu and small are a div classes you can latter use for styling your sub-menu

Sort criteria:

Make sure you remove date, cause it will break things if you have enabled aggregation

  • Taxonomy Term ID, use aggregation Count

Attachment settings:

  • Attach to: Page
  • Attachment position: before

Save your view, and you should be done with technical stuff. Now it is time to apply some CSS. Here is what I got at the result:

Listing child terms on Drupal taxonomy page

Listing child terms on Drupal taxonomy page

Using similar approach (attachment) I have attached taxonomy term description and even Google Maps to my category pages.