Displaying all categories and posts on one page in a hierarchy

Question

My client insists on having all categories and posts displayed on one page. Bad idea, I know, but I need to do it.

Anyway, the structure is something like this:

1st Level Category Title > 2nd Level Category Title > ... > nth Level Category Title > Post Content.

This will be structured in HTML something like:

<div class="cat primary">
    <h2>1st Level Category Title</h2>
    <div class="cat secondary">
        <h3>2nd Level Category Title</h3>
        <div class="cat tertiary">
            <h4>3rd Level Category Title</h4>
            ...
                <div class="cat tertairy">
                    <h4>nth Level Category Title</h4>
                    <div class="product">
                        <p>Post Content</p>
                    </div>
                </div>
            ...
        </div>
    </div>
    <div class="cat secondary">
        <h3>2nd Level Category Title</h3>
        <div class="product">
            <p>Post Content</p>
        </div>
    </div>
</div>

Explanation of functionality:

• The first category gets a class of "primary", the second "secondary", and all subsequent "tertiary". I can work around this with CSS if need be.
• <h2> is used for primary title, <h3> is used for secondary title, <h4> is used for all subsequent. I can work around this with CSS if need be.
• The deepest level of category in a tree displays any products in that category.

I've tried several things with get_terms() and get_categories(), but I can't figure out how to tell if a category is at its deepest level, and I can't figure out how to go infinitely deep in to a category tree (I end up having to duplicate my code for each new layer).

I'm current experimenting with this:

$categories = get_terms("product-category"); 
if ($categories && !is_wp_error($categories)) {
    foreach($categories as $category) {
        $children = get_terms("product-category", array(
            "parent"   => $category->term_id,
        ));
        if (count($children) == 0) {
            echo $category->name;
        }
    }
}

This does check to see if it's the deepest in a tree, but it doesn't actually construct the tree. I'll keep toying with it and report back any progress. Help would be immensely appreciated.

---

UPDATE 4: With a lot of help from @Nemutaisama, I was able to figure this out! Here's my final code (slightly modified from their answer below):

function loadCategories($categories, $level) {
    foreach($categories as $category) {
        $cat_class = "";
        $heading_tag = "";
        if ($level == 1) {
            $cat_class = "primary";
            $heading_tag = "h2 style='text-align:center;'";
        } elseif ($level == 2) {
            $cat_class = "secondary";
            $heading_tag = "h3";
        } else {
            $cat_class = "tertiary";
            $heading_tag = "h4";
        }
        echo "<section class='cat $cat_class'>";
        echo "<header>";
        echo "<$heading_tag>{$category->name}<button>Expand</button></$heading_tag>";
        if ($level == 1) {
            echo "<hr  class='short' />";
        }
        echo "</header>";
        if ($level > 1) {
            echo "<div class='expander'>";
        }
        $children = get_terms("product-category", array(
            "parent"   => $category->term_id,
        ));
        if (count($children) == 0) {
            $posts = get_posts(array(
                "post_type" => "products",
                "tax_query" => array(
                    array(
                        "field"    => "term_id",
                        "taxonomy" => "product-category",
                        "terms"    => $category->term_id,
                )),
            ));
            foreach ($posts as $post) {
                if ($level < 2) {
                    $cat_class = "secondary";
                    $heading_tag = "h3";
                } else {
                    $cat_class = "tertiary";
                    $heading_tag = "h4";
                }
                echo "<section class='cat $cat_class'>";
                echo "<header><$heading_tag>{$post->post_title}<button>Expand</button></$heading_tag></header>";
                echo "<div class='expander'>";
                echo "<article>";
                if (get_field("product_number", $post->ID)) {
                    echo "<div class='productNumber'><p># " . get_field("product_number", $post->ID) . "</p></div>";
                }
                echo "<div class='content'>";
                echo wpautop($post->post_content);
                echo "</div><!--/.content-->";
                echo "</article>";
                echo "</div><!--/.expander-->";
                echo "</section><!--/.cat.$cat_class-->";
            }
        }
        loadCategories($children, $level+1);
        if ($level > 1) {
            echo "</div><!--/.expander-->";
        }
        echo "</section><!--/.cat.$cat_class-->";
    }
}
$categories = get_terms("product-category", array(
    "parent" => 0,
));
if ($categories && !is_wp_error($categories)) {
    loadCategories($categories, 1);
}

Answer 1

i think recursive function will help you. something like this

function loadCategories($categories, $level) {
    foreach($categories as $category) {
        $children = get_terms("product-category", array(
            "parent"   => $category->term_id,
        ));
        $cat_class = "";
        $heading_tag = "";
        if ($level == 1) {
            $cat_class = "primary";
            $heading_tag = "h2 style='text-align:center;'";
        } elseif ($level == 2) {
            $cat_class = "secondary";
            $heading_tag = "h3";
        } else {
            $cat_class = "tertiary";
            $heading_tag = "h4";
        }
        echo "<section class='cat $cat_class'>";
        echo "<header>";
        echo "<$heading_tag>{$category->name}<button>Expand</button></$heading_tag>";
        if ($level == 1) {
            echo "<hr  class='short' />";
        }
        echo "</header>";
        if ($level > 1) {
            echo "<div class='expander'>";
        }
        if (count($children) == 0) {
            $posts = get_posts(array(
                "post_type" => "products",
                "tax_query" => array(
                    array(
                        "field"    => "term_id",
                        "taxonomy" => "product-category",
                        "terms"    => $category->term_id,
                )),
            ));
            foreach ($posts as $post) {
                if ($level < 2) {
                    $cat_class = "secondary";
                    $heading_tag = "h3";
                } else {
                    $cat_class = "tertiary";
                    $heading_tag = "h4";
                }
                echo "<section class='cat $cat_class'>";
                echo "<header><$heading_tag>{$post->post_title}<button>Expand</button></$heading_tag></header>";
                echo "<div class='expander'>";
                echo "<article>";
                if (get_field("product_number", $post->ID)) {
                    echo "<div class='productNumber'><p># " . get_field("product_number", $post->ID) . "</p></div>";
                }
                echo "<div class='content'>";
                echo wpautop($post->post_content);
                echo "</div><!--/.content-->";
                echo "</article>";
                echo "</div><!--/.expander-->";
                echo "</section><!--/.cat.$cat_class-->";
            }
        }
        loadCategories($children, $level+1);
        if ($level > 1) {
            echo "</div><!--/.expander-->";
        }
        echo "</section><!--/.cat.$cat_class-->";
    }
}
$categories = get_terms("product-category");
if ($categories && !is_wp_error($categories)) {
    loadCategories($categories, 1);
}