Displaying categories and subcategories “tree like” list on WordPress

Suppose you want to show a category / subcategory “tree like” list on a WordPress page that gets the posts from a certain “main” category.
Suponha que você quer mostrar uma “árvore” de categorias / subcategorias numa página WordPress que contém posts de uma certa categoria “principal”.

The following code, probably will be useful.
O código a seguir, provavelmente lhe será útil.

//# first of all, you need to get the category array,
//   and I did it, putting the line bellow inside the loop
$category = get_the_category(get_the_ID());

// once you have the category array, the rest of the code will work wherever you want on the page 

//# getting the main category of the page

//# now letz get the children categories of the main category
$categories = get_categories('child_of='.intval($catid)); 					 

foreach ($categories as $category) {
    //# check if it is a real parent category with subcategories
    if ($category->parent ==$catid):
        echo '<span class="category"><a href="">'.$category->cat_name.'</a></span>';
        //# here we go, getting the subcategories
        $subcategories=  get_categories('child_of='.intval($category->cat_ID));
        foreach ($subcategories as $subcategory) {
            echo '<span class="subcategory" style="padding-left:12px">';
            echo '<a href="">'.$subcategory->cat_name.'</a></span>';

  1. #1 by cruz on April 1, 2011 - 1:47 pm

    hello there and thanks,
    it would have been nice to see it in action as I am not sure of what this is for…
    Is it to display the sort of navigation current page position:
    you are here: category 1 / subcategory 2 / post1

    I’m trying to get this into the wordpress title for each article/post, as it is showing only the parent catefory, and not the grandparent…

    Does your code applies to that case?
    Mike dj

    • #2 by Alvaro Neto on April 1, 2011 - 1:57 pm

      Hello Mike,

      You can see this code working on http://www.schdseditora.com.br/htdocs/new/materiais/.

      There is a menu, in portuguese, that starts with “Criatividade e Design”.

      If you send your code to alvaron@gmail.com , I’ll try to get a look on the weekend, to show the categories in the way that you want, probably depends on your page / loop structure.

      Best Regards

  2. #3 by NM Frazer on May 14, 2011 - 3:22 am

    Thank you so much, this was just what I had spent days searching for. I am using this in a drop down menu. Having changed the *span* to *li,* I have run into issues in styling the CSS. I was wondering is it were possible to change the *echo ‘‘.$category->cat_name.’‘* into the WordPress *current menu item* or somehow pull each category so it would list its id in the *li.* What I am trying to do is highlight the active subcategory so it stands out amongst it siblings in the submenu. Any advice or a direction to go in would be appreciated.
    Again, thank you for this great piece of code.

    Have a great weekend,

    • #4 by Alvaro Neto on May 14, 2011 - 8:35 pm

      Nice, Nina I’m happy to help 🙂

  3. #5 by Juan Palomo on June 27, 2011 - 3:23 am

    sorry, i am very new with this, can you give me an example please?

    how i must make for show?

    y try to put on the end but not work for me.
    can you give me a sample code for copy&paste and them i will try to customeze please?
    i start few month ago and i need to lear more but i will be very placed if you can show me with an example please.

    thanks so much from now, really thanks

    • #6 by Alvaro Neto on July 4, 2011 - 1:50 pm

      Om, it’s going to your email. Best regards.

  4. #7 by Muhammed Masood on August 3, 2011 - 3:39 pm

    Hi, nice post.

    What will be the loop that is to be there? Where shall i put this code ?

    Could you please send me a sample as well?

    I am trying to show sub categories of a particular parent category. It would be great if you could help me out.

    • #8 by Alvaro Neto on August 9, 2011 - 6:10 pm

      Hi Muhammed, thank you for your visit. I’m kinda busy with a lot of jobs now to give you the answers, but you can check my consulting services, and maybe with few ours of work, I can develop a custom solution for you. Best regards.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: