Looping to organize and display custom posts by category using PHP and WordPress

Question

I am developing a page that requires me to display a list of categories for a custom post type in an accordion-style dropdown. The category name will act as the accordion title, and the contents are to be the posts associated with each particular category. The image below summarizes what I would ultimately accomplish.

I've be able to successfully retrieve the category names and assign them to an accordion dropdown, but what is happening is that my code is adding new cells even though the two posts are associated with the similar category name.

Arrrrrg, I feel like i'm so close! Here's a snippet of what my code looks like so far.

<div id="accordion" class="col-8" role="tablist" aria-multiselectable="true">
          <?php 
                $args = array(
                    'post_type' => 'our_work',
                    'posts_per_page' => -1,
                    'orderby' => 'category',
                    'hide_empty' => 0,
                );  
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();
            ?>
    <div class="card box-shadow">

        <div class="card-header" role="tab" id="<?php the_ID(); ?>">
            <h5 class="mb-0">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php the_ID(); ?>"
                    aria-expanded="false" aria-controls="collapseOne">
                    <?php
                      foreach((get_the_category()) as $category) { 
                          echo $category->cat_name . ' '; 
                      }
                    ?>
                </a>
            </h5>
        </div>

        <div id="collapse<?php the_ID(); ?>" style="transition: all 0.5s ease 0s;" class="collapse nomnom"
            role="tabpanel" aria-labelledby="heading<?php the_ID(); ?>">
            <div class="card-block">
                <h1><?php the_title(); ?></h1>
                <p><?php the_Content(); ?></p>
            </div>
        </div>

    </div>
    <?php endwhile; wp_reset_query(); ?>
</div>

What I suspect is going on is that I don't have my loop set up properly and is adding a new cell as a result.

I am still fairly new to working with the 'WordPress loop', so any advice would be greatly appreciated!!!

Answer 1

Add this after $args

$categories = get_terms('category', $args); //get all categories
$count = count($categories ); //count categories
if ( $count > 0 ){ //Check if you got some categories
foreach ( $categories as $category ) { 
 $args['cat'] = $category->term_id; //get the id of each category and add it as a parameter
$loop_our_work = new WP_Query( $args ); //start a new query with 'cat' parameter inside of it for each category
if($loop_our_work ->have_posts()) { //always check if query have posts
    //echo here category name or whatever you need about category
while( $loop_our_work ->have_posts() ) : $loop_our_work ->the_post(); 
//echo here whatever you need for each post on current category inside the loop
endwhile;
} //endif

The code is not tested but i hope it helps you