How to display posts categories as classes

admin

Administrator
Staff member
Seems that I am just too stupid to achieve this. Seems so simple, yet…
I created a template and try to display a custom portfolio (registered by a custom post plugIn) This works fine with the following code:

Code:
<div id="container">

    <?php

    //Define your custom post type name in the arguments                           
    $args = array('post_type' => 'boxes_scientists');

    //Define the loop based on arguments                            
    $loop = new WP_Query( $args );               

    //Display the contents                            
    while ( $loop->have_posts() ) : $loop->the_post();
    ?>

    /*
    <?php
        foreach((get_the_category()) as $category) { 
            echo $category->cat_name . ' '; 
    } 
    ?>

    <?php the_category(', '); ?>
    */

    <div class="some_base_class [categories of the post need to go here]">

        <a class="element" href="<?php the_permalink(); ?>"></a>
        <div class="portfolio-box">
            <div class="portfolio-naming">
                <h2 class="portfolio-title"><?php the_title(); ?></h2>
                <h3 class="portfolio-attributes"><?php the_content(); ?></h3>
          </div>
        </div>

        <?php the_post_thumbnail(); ?>

    </div>

<?php endwhile;?>



but I can’t get to work the commented out code part and display the categories inside the class tag of my container element (for each post displayed in the loop).

I actually found also this concept:

<a href="https://lorelle.wordpress.com/2007/09/06/using-wordpress-categories-to-style-posts" rel="nofollow">https://lorelle.wordpress.com/2007/09/06/using-wordpress-categories-to-style-posts</a>

which seemed to be exactly what I need but sadly this didn’t work at all for me. (placed the function inside functions.php on my child theme and theme both without any result)

What I am misunderstanding here? Can someone show me the correct code I have to use? Would be so awesome. Thanks in advance!

<strong>EDIT</strong>

So this finally brings me on the right way:

Code:
&lt;?php
[…]
$category = get_the_category();
$firstCategory = $category[0]-&gt;cat_name;?&gt;



&lt;div class="some_base_class &lt;?php echo $firstCategory ?&gt;"&gt;

I missed the “echo” thing inside my div. Now I will have to find the way to display <em>all</em> categories of my post instead of only the first.

<strong>EDIT 2:</strong>

Code:
&lt;div id="boxes_section" class="main-content master-section-content nano_boxes no-detect no-padding"&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-md-12 normal-column start-animated-content az-fade-in" data-delay="300"&gt;
                    &lt;div class="blank-divider" style="height: 30px;"&gt;&lt;/div&gt;

                    &lt;div id="portfolio-item-section" class="portfolio-output masonry-ly-portfolio classic-module no-pagination" data-cols="3"&gt;

                        &lt;?php

                        //Define your custom post type name in the arguments                           
                        $args = array('post_type' =&gt; 'boxes_scientists');

                        //Define the loop based on arguments                            
                        $loop = new WP_Query( $args );               

                        //Display the contents                            
                        while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post();
                        ?&gt;


                        &lt;div class="single-portfolio-item az-col-full-width-4 [NEED THE CLASSES HERE]"&gt;


                              &lt;a class="classic-portfolio-box normal-type-prt" href="&lt;?php the_permalink(); ?&gt;"&gt;
                                  &lt;p class="site_leave"&gt;&lt;i class="font-icon-forward"&gt;&lt;/i&gt;You are going to leave this website&lt;/p&gt;
                              &lt;/a&gt;
                              &lt;div class="portfolio-box"&gt;
                                  &lt;div class="portfolio-naming"&gt;
                                      &lt;h2 class="portfolio-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
                                      &lt;h3 class="portfolio-attributes"&gt;&lt;?php the_content(); ?&gt;&lt;/h3&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;

                              &lt;?php the_post_thumbnail(); ?&gt;

                        &lt;/div&gt;

                        &lt;?php endwhile;?&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;