How To Add Custom CSS Class to Tags (the_tags) In WordPress

Are you looking to add custom flair to the tags on your WordPress website? With just a few lines of code, you can easily apply custom CSS classes to your tags, giving them a unique look and feel.

This tutorial will show you how to add custom CSS classes to your tags using the WordPress the_tags hook and a simple PHP function. By the end, you’ll have all the knowledge you need to customize the appearance of your tags and make them stand out on your website.

Place this code in your theme’s functions.php file or create a custom plugin with this code:

<?php
// Add Custom Class to the_tags
function wpobsessed_add_custom_class_to_tags() {
  $tags = get_the_tags(); // Retrieve the list of tags for the current post

  if ($tags) { // Check if the list of tags is not empty
    foreach ($tags as $tag) {
      $html .= '<a href="' . get_tag_link($tag->term_id) . '" class="custom-class">'. $tag->name .'</a>'; // Generate HTML with custom class
    }
    echo $html; // Echo the HTML with custom class
  }
}

add_action( 'the_tags',  'wpobsessed_add_custom_class_to_tags' ); // Add an action to the_tags

This is a PHP function that adds a custom class to the tags of a post on a WordPress site. The function does the following:

1. Retrieves the list of tags for the current post using the get_the_tags() function.
2. If the list of tags is not empty, it loops through each tag in the list using a foreach loop.
3. The function generates an HTML anchor element for each tag that points to its URL and has the
   class applied. The function also displays the tag’s name as the anchor text.
4. The function then echoes the generated HTML with the custom class.
5. Finally, the function adds an action to the the_tags hook, a WordPress hook that allows custom functions to be executed when the tags for a post are displayed. This causes the add_custom_class_to_tags() function to be called whenever the tags for a post are displayed, which will add the custom class to the tags.

Happy styling!

If this tutorial helped, please share it! 🙂