Putting each wordpress post "Category" in it's own unique Div Class

Question

I'm creating a portfolio page using "WordPress posts" (this is so it spits out single.php pages nicely for me) using PHP and ACF. I'm trying to find a way to put each "category" in its own div. This would allow me to style the layout of the content within each filter. Please see the example below. Maybe I should be doing this a different way?

• Filter 1 - 1 column layout
• Filter 2 - 3 column layout

example of filter 1 example of filter 2

TLDR: Trying to put the content of each WordPress category in its own div.

    <div class="work">

        <?php if (has_post_thumbnail() ): ?>
            <a href="<?php the_permalink(); ?>" class="blogimage">
                <?php the_post_thumbnail( 'medium' ); ?>
            </a>
        <?php endif; ?>
        
            <div class="work-copy">
                
                <div class="category">
                    <?php echo get_the_category_list(); // Display categories as links within ul ?>
                </div>
                
                <h2 class="headline">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?><i class="fal fa-chevron-right"></i></a>             
                </h2>
                
            </div>   
    </div>
    
<?php endwhile; ?>

Answer 1

WordPress automatically adds CSS classes to different elements throughout your website. These include both the body class and the post class.

For example, if you view a category archive page and then use the Inspect Tool, you will notice category and category-name CSS classes in the body tag.

Category class added to body element by WordPress

You can use this CSS class to style each individual category differently by adding custom CSS.

You can find more details here

Answer 2

Quite a simple fix after doing some research, here is the answer I found useful;

<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>">

Place this within each post. In order to style each div class individually, you need to place a containing div in between the if / while statement. Then you'll the place content of each "category filter" with the div.

<?php if ( have_posts() ) : // Do we have any posts in the database that match our query? ?>
<div class="work-container">
    <?php while (have_posts()) : the_post(); ?> <!-- Finds the post -->
    
        <?php $category = get_the_category(); ?>
        <div class="category-<?php echo $category[0]->slug ?>"> <!-- This calls out the Category in the WP Post -->
                                            
            <div class="work-group">
                <?php if (has_post_thumbnail() ): ?>
                    <a href="<?php the_permalink(); ?>" class="blogimage">
                        <?php the_post_thumbnail( 'medium' ); ?>
                    </a>
                <?php endif; ?>
            </div> 
        </div>
    <?php endwhile; ?>
</div>
<?php endif; ?>

This was answered here and with a bit of playing I got it to work, Hope this helps someone! Get the name of the first category