Show Post Count on Subcategories of a Custom Post Type

Question

I have a custom post type called products with product_categories as its taxonomy name. It contains categories which each have subcategories and posts.

I want to display a count of all posts in the subcategories only.

Here is what I have so far:

<?php
// POSTS LOOP

// Query 
$args = array( 'post_type' => 'products' , 'orderby' => 'menu_order', 'order' => 'ASC' ,
    'tax_query' => array(
        array(
            'taxonomy' => 'product_categories',
            'terms' => array(14),
            'include_children' => false
        )
));
$query = new WP_Query( $args );

// Post Counter
$term_id = 14;
$tax_name = 'product_categories';
$terms = get_terms($tax_name, array('parent' => 0));
$term_children = get_term_children($term_id,$tax_name);
$post_count = 0;

// Loop Structure
echo '<ul>';
while ( $query->have_posts() ) : $query->the_post();
    echo '<li class="zazzoo-page">';

        foreach($terms as $term) {

            $term_children = get_term_children($term->term_id,$tax_name);
            echo '<ul>';
            foreach($term_children as $term_child_id) {
                $term_child = get_term_by('id',$term_child_id,$tax_name);
                $post_count = $term_child->count;
                echo '<div class="zazzoo-counter">'. $post_count .' Designs</div>';
            }
            echo '</ul>';

        } ?>

        <div class="title-border"><div class="page-title"><?php the_title(); ?></div></div>
        <div class="hovereffect">
            <?php the_post_thumbnail('zazzoo-thumb', array('class' => 'responsive-img')); ?>
            <div class="overlay">
                <h2><?php the_title(); ?></h2>
                <?php the_content(); ?>
            </div>
        </div>
    <?php echo '</li>';
endwhile;
echo '</ul>';

wp_reset_query();
?>

Above is an image of what it currently looks like. Brochures and Card Tags (in which there are 4 posts each) are subcategories that the post count value should display on and the rest are posts.

I'm still learning WordPress theme development so if anyone can offer some guidance, it would be greatly appreciated.

Answer 1

If you want posts and terms mixed with posts and show them together - that is a pretty hard task.

I would advise you to only use one or the other in a list - much easier.

To get to that you may do the following:

1. Create a category for all of your posts you want to show (eg create "Floor graphics", "Mugs", "Notepads" and "Stickers"), like you did for "Brochures" and "Card Tags". This way you'll have 2 subcategories with 4-4 posts in it, and 4 subcategories with 1-1 post in it.
2. If you do this, then you only have to use the get_terms() query.

This could be your query (where you want to see subcategories of a term with ID 14):

$tax_name = 'product_categories';
$parent_id = 14;
$terms = get_terms( $tax_name, array( 'parent' => $parent_id, 'pad_counts' => 1, ) );

Then you can go, and print it:

$html = '';
$html .= '<ul>';
foreach ( $terms as $single_term ) {
    $html .= '<li class="zazzoo-page">';
    // only put the tag on terms, that have more than 1 items in it
    if ( $single_term->count > 1 ) {
        $html .= '<div class="zazzoo-counter">'. $single_term->count .' Designs</div>';
    }
    $html .= '<div class="title-border">';
    $html .= '<div class="page-title">';
    $html .= $single_term->name;
    $html .= '</div>';
    $html .= '</div>';
    $html .= '<div class="hover effect">';
    $html .= '<div class="overlay">';
    $html .= $single_term->name;
    $html .= '</div>';
    $html .= '</div>';
    $html .= '</li>';
}
$html .= '</ul>';

echo $html;

This way you will have the list with names and counts (where needed), but you will lose the image and the content (on hover).

If you want the image and the content back, you may query the first post of each subcategory for this content, like this:

$posts_array = get_posts(
    array(
        'posts_per_page' => 1,
        'post_type' => 'products',
        'tax_query' => array(
            array(
                'taxonomy' => 'product_categories',
                'field' => 'term_id',
                'terms' => $single_term->term_id,
            )
        )
    )
);

OR you can assign an image and / or a description to the custom taxonomy subcategories you display.

I hope this helps you out a bit. :)