Display 3 levels of categories on page

Question

I have a loop that takes the cat_id of the top-level e.g. "Data", loop through the categories, display the second level as H2s, and then display the posts in each subcategory.

Data

Analytics Services

• Post
• Post

Data Platform

• Post
• Post

Now, I have been given a third level and need to output the third level as H3s, then the posts, as in

Data

Analytics Services

Business Signals

• Post
• Post

Customer Analytics

• Post
• Post

Data Platform

IOT

• Post

Services

• Post

I am having a hard time figuring our how to tease out that new level. Here's the current, two-level loop:

    <?php
        $paged = ( get_query_var( 'paged' ) ) ? get_query_var('paged') : 1;
        $cat_id = 42;
        $child_categories=get_categories(
            array( 'parent' => $cat_id )
        );

        foreach ( $child_categories as $child ) { ?>  
          <!-- loop through child categories and make columns -->
            <div class="col-sm-4">

            <!-- category title -->
            <?php
              $string = $child ->cat_name;
              $className = str_replace(' ', '', $string);  
             ?>
             <h2 class="cat-icon <?php echo $className; ?>"><?php echo $child ->cat_name; ?></h2>

             <!-- query -->
             <?php  $args = array(  'category_name' => $child->cat_name, 'posts_per_page' => -1, 'paged' => $paged, 'orderby' => 'title', 'order' => 'ASC'  );
              $loop = new WP_Query( $args ); ?>

            <!-- loop to create buttons -->
            <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
              <?php get_template_part("home", "service-button"); ?>
            <?php endwhile; ?>


          </div>

        <?php } ?><!-- end foreach loop -->

Answer 1

Try this:

<?php
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var('paged') : 1;
    $cat_id = 42;
    $child_categories=get_categories(
        array( 'parent' => $cat_id )
    );

    foreach ( $child_categories as $child ) { ?>  
      <!-- loop through child categories and make columns -->
        <div class="col-sm-4">

        <!-- category title -->
        <?php
          $string = $child->cat_name;
          $className = str_replace(' ', '', $string);  
         ?>
         <h2 class="cat-icon <?php echo $className; ?>"><?php echo $child->cat_name; ?></h2>

         <?php
                $subchild_cats = get_categories( array( 'parent' => $child->term_id ) );
                foreach ( $subchild_cats as $subchild ) :
                    $className = str_replace( ' ', '', $subchild->cat_name );
         ?>
            <h3 class="cat-icon <?php echo $className; ?>"><?php echo $subchild->cat_name; ?></h3>
         <!-- query -->
         <?php  $args = array(  'category_name' => $subchild->cat_name, 'posts_per_page' => -1, 'paged' => $paged, 'orderby' => 'title', 'order' => 'ASC'  );
          $loop = new WP_Query( $args ); ?>

        <!-- loop to create buttons -->
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
          <?php get_template_part("home", "service-button"); ?>
        <?php endwhile; ?>
        <?php endforeach; ?>


      </div>

<?php } ?><!-- end foreach loop -->