Adding classes to categories in a list of archives in Wordpress

Question

I am not very familiar with PHP but I am learning. I am using Wordpress and am wanting to create a filterable page of 'news updates', which are a list of post archives from the 'last 15 posts'.

I have 4 categories:

• New Benefit
• Useful
• Urgent & Important
• For You

When I create a post assigned to this particular category I want the list item to be given the class of the category.

The result I want my page to be

With the following CSS:

.category-useful:before {
        float: right;
    position: inherit;
    color: white;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f129";
    zoom: 3;
    padding: 5px 10px 5px 20px;
}

.category-urgent_important, .category-urgent_important h2 {
    color: white;
    background-color: red;
}

.category-urgent_important:before {
        float: right;
    position: inherit;
    color: white;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f071";
    zoom: 3;
    padding: 5px 5px 5px 20px;
}

.category-for_you, .category-for_you h2 {
    color: white;
    background-color: green;
}

.category-for_you:before {
    float: right;
    position: inherit;
    color: white;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f02d";
    zoom: 3;
    padding: 5px 5px 5px 20px;
}

.category-uncategorised {
display: none;
}

Here is my current markup:

  function category_ac(){
    $categories = get_the_category();
    foreach ( $categories as $category ) {
        echo esc_html( $category->cat_name );
    }
  }

  $how_many_last_posts = intval(get_post_meta($post->ID, 'archived-posts-no', true));
  if($how_many_last_posts > 200 || $how_many_last_posts < 2) $how_many_last_posts = 15;

  $my_query = new WP_Query('post_type=post&nopaging=1');
  if($my_query->have_posts()) {
    echo '<h1 class="widget-title">Last '.$how_many_last_posts.' Posts <i class="fa fa-bullhorn" style="vertical-align: baseline;"></i></h1>&nbsp;';
    echo '<div class="archives-latest-section"><ol>';
    $counter = 1;
    while($my_query->have_posts() && $counter <= $how_many_last_posts) {
      $my_query->the_post();
      ?>
      <li class="<?php echo 'category-'.category_ac() ?>"><a href="<?php the_permalink() ?>" rel="category tag" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></li>
      <?php
      $counter++;
    }
    echo '</ol></div>';
    wp_reset_postdata();
  }

The trouble is, it works, but like this:

<div class="archives-latest-section"><ol>      <li class="Uncategorized"><a href="https://www.website.com/2019/10/07/test-5/" rel="category tag" title="Permanent Link to Test 5">Test 5</a></li>
            <li class="New Benefitcategory-"><a href="https://www.website.com/2019/10/07/test-4/" rel="category tag" title="Permanent Link to Test 4">Test 4</a></li>
            <li class="Usefulcategory-"><a href="https://www.website.com/2019/10/07/test-3/" rel="category tag" title="Permanent Link to Test 3">Test 3</a></li>
            <li class="Urgent &amp; Importantcategory-"><a href="https://www.website.com/2019/10/07/test-2/" rel="category tag" title="Permanent Link to Test 2">Test 2</a></li>
            <li class="For Youcategory-"><a href="https://www.website.com/2019/10/07/test-1/" rel="category tag" title="Permanent Link to Test 1">Test 1</a></li>
      </ol></div>

How can I manipulate the output of 'category_ac();' and remove white space and capitalisation all while sticking 'category-' in the front?

I found this thread:

Strip php variable, replace white spaces with dashes

Though that implies that the 'category_ac()' would need to be a variable to be changed.

I couldn't seem to apply my own variable like:

$test = category_ac();

...As that didn't do anything so I imagine I'm doing it wrong.

Answer 1

If you leave category- out of php brackets and just echo the function will work. Then you can try to use the category slug instead of name probably this will solve you the name issue

Here is the code with my changes $category->slug and <li class="category-<?php echo category_ac() ?>">

Let me know if it's working for you

  function category_ac(){
    $categories = get_the_category();
    foreach ( $categories as $category ) {
        echo esc_html( $category->slug );
    }
  }

  $how_many_last_posts = intval(get_post_meta($post->ID, 'archived-posts-no', true));
  if($how_many_last_posts > 200 || $how_many_last_posts < 2) $how_many_last_posts = 15;

  $my_query = new WP_Query('post_type=post&nopaging=1');
  if($my_query->have_posts()) {
    echo '<h1 class="widget-title">Last '.$how_many_last_posts.' Posts <i class="fa fa-bullhorn" style="vertical-align: baseline;"></i></h1>&nbsp;';
    echo '<div class="archives-latest-section"><ol>';
    $counter = 1;
    while($my_query->have_posts() && $counter <= $how_many_last_posts) {
      $my_query->the_post();
      ?>
      <li class="category-<?php echo category_ac() ?>"><a href="<?php the_permalink() ?>" rel="category tag" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></li>
      <?php
      $counter++;
    }
    echo '</ol></div>';
    wp_reset_postdata();
  }