I was trying the other days to create a nice horizontal menu, from categories and subcategories like this website: diyguides.us . I like that magazine presentation very much and i struggled few days to get that fine look.

I have searched on internet, on wordpress official website, plug-ins for wordpress, but nothing too useful. Then i remembered about my programmer roots and started to do something about it, i have read the wordpress documentation and learned how categories are fetched and printed. Css was not an problem to me, and then i figured out at some point how i should proceed.

The whole idea is to fetch the first level of categories, tier one, and once one category is selected to fetch the child of this category.

This will be done using the following line code:, very simple, right?

wp_list_categories(‘depth=1&exclude=1&hide_empty=0&child_of=’.$this_category->category_parent.’&orderby=name&show_count=0&use_desc_for_title=1&title_li=’);

One challenge is when you click on level two category, this should not have anymore child but the brothers needs to be listed, so your navigation does not goes away. This, i’ve done it like this:

<?php

if (is_category()) {
$this_category = get_category($cat);
}
?>
<?php
if($this_category && $this_category->category_parent) {

$this_category = wp_list_categories(‘depth=1&exclude=1&hide_empty=0&child_of=’.$this_category->category_parent.’&orderby=name&show_count=0&use_desc_for_title=1&title_li=’);

} else if ($this_category) {

$this_category = wp_list_categories(‘depth=1&exclude=1&hide_empty=0&child_of=’.$this_category->cat_ID.’&orderby=name&show_count=0&use_desc_for_title=1&title_li=’);

}

?>

I am sure, that the code needs more improvement, but for begining, it is an starting point.

I will add in an future tutorial also the css styles, i will prepare them by then.

If you need more assistance from me, please don’t hesitate, i will gladly help you with it.