A Child Category Sub-Menu

Over at Swanson Heritage I was faced with an interesting challenge.  As I do enjoy a challenge, I dug right in and solved it.

The issue: A Child Category Sub-Menu:

The site is a Family Tree. It has a deep structure of Categories and Child Categories and Grand-Child Categories making the menu structure a challenge. I have created ‘people’ as categories and used the child category structure to organize them.

Swanson Heritage Sub Menu

Swanson Heritage Sub Menu

 Swanson Heritage

In the above, the first row is a Custom Menu. It is a combination of popular Categories, Pages, and even a section that is for logged in users only (Memories). We start here.

The second is output using Breadcrumb NavXT. Using this lists the familial hierarchy.

The third row is our Child Category Sub-Menu. Here we want to list the remaining child categories (think spouse, son, daughter) of our current category (think parent).

The work:

First, the site is using the Twentyeleven Theme and, of course, a proper Child Theme.

The section that creates the third row is:

<nav class="menutwo" id="access" role="navigation">
<?php $args = array(
 'type' => 'post',
 'child_of' => '',
 'parent' => get_query_var('cat'),
 'orderby' => 'name',
 'order' => 'ASC',
 'hide_empty' => 1,
 'hierarchical' => 1,
 'exclude' => '',
 'include' => '',
 'number' => '',
 'taxonomy' => 'category',
 'pad_counts' => true );

 $categories = get_categories($args);
 foreach($categories as $category)
 {
 ?>
 <ul><li><a href="<?php echo get_category_link( $category->term_id )?>"
 title="View posts in <?php echo $category->name?>">
 <?php echo $category->name?>
 </a></li></ul>
 <?php }
 ?>
 </nav>

The menu part was well documented in the Codex. What was not was this part:

'parent' => get_query_var('cat'),

This is what grabs the current categories children. Special thanks to Alchymyth for the tip!

We add above to our header-custom.php file and then edit get_header() in the category.php to call this header file (of Child Theme):

get_header('custom')

We can use any name instead of ‘custom’, but make sure to follow naming conventions for template files.

We also added class=”menutwo”  to <nav> so we could move the sub-menu up a bit.

A caveat: I have repeated the id access now. W3 Validator is griping. Oh well…I will fix that soon (replace the id with access1 and apply the CSS).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>