php - WP grandchild categories in nested ul li

admin管理员组

文章数量:1332890

This code works fine and list all parent, child and grandchild categories The code shows bootstrap toggle on parents and it works fine.

All I need the grandchildren into another level ul li and the toggle should be on children that contain grandchildren

<ul>   
 <?php 
  $get_parent_cats = array(
      'parent' => '0' //get top level categories only
  ); 
  
  $all_categories = get_categories( $get_parent_cats );//get parent categories 
  
  foreach( $all_categories as $single_category ){
      //for each category, get the ID
      $catID = $single_category->cat_ID;
  
      echo '<li><a data-toggle="collapse" href="#' . $single_category->name . '" role="button" aria-expanded="false" aria-controls="' . $single_category->name . '">' . $single_category->name . '<i class="fas fa-angle-down float-right mt-2"></i></a>'; //category name & link
      
      $get_children_cats = array(
          'child_of' => $catID //get children of this parent using the catID variable from earlier
      );
  
      $child_cats = get_categories( $get_children_cats );//get children of parent category
      echo '<ul class="collapse show" id="' . $single_category->name . '">';
          foreach( $child_cats as $child_cat ){
              //for each child category, get the ID
              $childID = $child_cat->cat_ID;
  
              //for each child category, give us the link and name
              echo '<li><a href=" ' . get_category_link( $childID ) . ' ">' . $child_cat->name . '<span class="float-right">('.$child_cat->count.')</span></a>';
  
               
          }
      echo '</ul></li>';
  } //end of categories logic ?>
</ul>

Result of above code

<ul>
<li>
  <a data-toggle="collapse" href="#DISPENSERS" role="button" aria-expanded="false" aria-controls="DISPENSERS">Parent1<i class="fas fa-angle-down float-right mt-2"></i></a>
    <ul class="collapse show" id="DISPENSERS">
        <li>Child</li>
        <li>Child</li>
        <li>GrandChild</li>
    </ul>
</li>
<li>
   <a data-toggle="collapse" href="#VULLING" role="button" aria-expanded="false" aria-controls="VULLING">Parent2<i class="fas fa-angle-down float-right mt-2"></i></a>
    <ul class="collapse show" id="VULLING">
        <li>Child</li>
        <li>GrandChild</li>
        <li>Child</li>
    </ul>
</li>

Requirements

<ul>
<li>Parent1
    <ul>
        <li>Child</li>
        <li> <a data-toggle="collapse" href="#DISPENSERS" role="button" aria-expanded="false" aria-controls="DISPENSERS">Child<i class="fas fa-angle-down float-right mt-2"></i></a>
        <ul class="collapse show" id="DISPENSERS">
           <li>
              <li>GrandChild</li>
              <li>GrandChild</li>
           </li>
        <ul>
        <li>Child</li>
    </ul>
</li>

</ul>
 


  

This code works fine and list all parent, child and grandchild categories The code shows bootstrap toggle on parents and it works fine.

All I need the grandchildren into another level ul li and the toggle should be on children that contain grandchildren

<ul>   
 <?php 
  $get_parent_cats = array(
      'parent' => '0' //get top level categories only
  ); 
  
  $all_categories = get_categories( $get_parent_cats );//get parent categories 
  
  foreach( $all_categories as $single_category ){
      //for each category, get the ID
      $catID = $single_category->cat_ID;
  
      echo '<li><a data-toggle="collapse" href="#' . $single_category->name . '" role="button" aria-expanded="false" aria-controls="' . $single_category->name . '">' . $single_category->name . '<i class="fas fa-angle-down float-right mt-2"></i></a>'; //category name & link
      
      $get_children_cats = array(
          'child_of' => $catID //get children of this parent using the catID variable from earlier
      );
  
      $child_cats = get_categories( $get_children_cats );//get children of parent category
      echo '<ul class="collapse show" id="' . $single_category->name . '">';
          foreach( $child_cats as $child_cat ){
              //for each child category, get the ID
              $childID = $child_cat->cat_ID;
  
              //for each child category, give us the link and name
              echo '<li><a href=" ' . get_category_link( $childID ) . ' ">' . $child_cat->name . '<span class="float-right">('.$child_cat->count.')</span></a>';
  
               
          }
      echo '</ul></li>';
  } //end of categories logic ?>
</ul>

Result of above code

<ul>
<li>
  <a data-toggle="collapse" href="#DISPENSERS" role="button" aria-expanded="false" aria-controls="DISPENSERS">Parent1<i class="fas fa-angle-down float-right mt-2"></i></a>
    <ul class="collapse show" id="DISPENSERS">
        <li>Child</li>
        <li>Child</li>
        <li>GrandChild</li>
    </ul>
</li>
<li>
   <a data-toggle="collapse" href="#VULLING" role="button" aria-expanded="false" aria-controls="VULLING">Parent2<i class="fas fa-angle-down float-right mt-2"></i></a>
    <ul class="collapse show" id="VULLING">
        <li>Child</li>
        <li>GrandChild</li>
        <li>Child</li>
    </ul>
</li>

Requirements

<ul>
<li>Parent1
    <ul>
        <li>Child</li>
        <li> <a data-toggle="collapse" href="#DISPENSERS" role="button" aria-expanded="false" aria-controls="DISPENSERS">Child<i class="fas fa-angle-down float-right mt-2"></i></a>
        <ul class="collapse show" id="DISPENSERS">
           <li>
              <li>GrandChild</li>
              <li>GrandChild</li>
           </li>
        <ul>
        <li>Child</li>
    </ul>
</li>

</ul>
 


  

• php
• categories
• html

Share Improve this question asked Jun 28, 2020 at 14:49 shahidshahid 11122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can't do it using simple for/foreach loops. This is an excellent example where a recursion can help:

function get_categories_list( $parent, $use_toggle = true ) {
    $result = "";
    $categories = get_categories( array ( 'parent' => $parent ) );
    if ($categories) {
        foreach ($categories as $category) {
            $name = $category->name;
            // HERE THE RECURSION IS USED TO GET SUBCATEGORIES TREE
            $children = get_categories_list( $category->cat_ID );
            if ($children) {
                // category has children, use expandable style
                if ( $use_toggle ) {
                    $result .= "<li><a data-toggle=\"collapse\" href=\"#${name}\" role=\"button\" aria-expanded=\"false\" aria-controls=\"${name}\">${name}<i class=\"fas fa-angle-down float-right mt-2\"></i></a><ul class=\"collapse show\" id=\"${name}\">" . $children . "</ul></li>";
                } else {
                    // root categories level, simplified style without toggle
                    $result .= "<li>${name}<ul>" . $children . "</ul></li>";
                }
            } else {
                // category hasn't any children, use endpoint style
                $result .= '<li><a href="' . get_category_link( $category->cat_ID ) . "\">${name}<span class=\"float-right\">(" . $category->count . ')</span></a></li>';
            }
        }
    }
    return $result;
}

// list categories from root level ( parent = 0 ), no toggle at root level ( $use_toggle = false )
echo '<ul>', get_categories_list( 0, false ), '</ul>';

本文标签： phpWP grandchild categories in nested ul li