php - Assign multiple categories as classes from custom post types in wordpress

I have set up some custom post types and I am trying to achieve an on-page filter using javascript. I have managed to be able to output the first class that is signed, but I cannot get it to add multiple classes. Ideally, I don't want to have to hardcode the categories as I will be handing this over to a client and they will be adding many more in the future.

Here is what I have so far:

<?php
    $loop = new WP_Query( array(
        'post_type' => 'portfolio_item',
        'order' => 'ASC',
        'posts_per_page' => -1
        )
    );
     while ( $loop->have_posts() ) : $loop->the_post();
         $cats = wp_get_post_categories($post_id);
                
            
            echo '<div class="'.implode(" ", $cats).' filter-item pb-3">';
        ?>
    <div class="p-4 border text-center bg-white h-100 rounded">
         <a href="<?php echo the_permalink();?>">
              <div class="dealer-logo" style="height: 300px">
                  <img src="<?php echo get_the_post_thumbnail_url($post_id, 'full'); ?>"
                       class="mb-4 mx-auto object-fit object-cover" style="height: 300px">
              </div>
              <h3><?php echo the_title(); ?></h3>                       
              <div class="mt-4 pb-3">
                   <p>Read More</p>
              </div>
            </a>


       </div>
   </div>

 <?php endwhile;?>

So for example, in the top 'filter-item' div I would hope to see 2/3 classes populated that belong to that custom post type.

I currently just get the first class that is associated with the post. I guess I need to put the categories in an array and then loop over these. However, that is a little bit beyond me.

Any help is much appreciated!

Solution:

As you mentioned you would need to get the post categories in array. Use wp_get_post_categories function

Once you have categories in array use this.

    $cats = array('one','two','three');
    echo '<h2 class="'.implode(" ", $cats).'">Test</h2>';

This will get you what you're after.