Output each WordPress tag with a specific class

Posted on by Elio Rivero

You might be familiar with sites like Dribbble or Creattica where they show, along with the usual text tag, another tag which is simply a coloured rectangle for Dribbble or a square in Creattica. Not only do they look good but they are an effective interface element. In this tutorial we will learn how to output the tags of a post with specific classes for each tag using WordPress.

Locate the place where your theme outputs the tags for your post and replace it or combine it with the following code:

[php]
$posttags = get_the_tags();
if($posttags){

$customtags = "<div class=’tags’>";
foreach ($posttags as $tag) {
$customtags .= "<a class='{$tag->slug}’
title=’" . ucwords($tag->name) . "’
href=’" . get_tag_link($tag->term_id) . "’>" ;
$customtags .= "{$tag->name}</a>n";
}
$customtags .= "</div>";

echo $customtags;
}
[/php]

Let’s go through each line. The first one initializes a $posttags variable where we will store all our tags. After checking that we actually have some tags, we start a foreach loop retrieving the tags currently assigned to the post to iterate through each one.

The third line outputs a tag. After opening an anchor, its class attribute is set to $tag->slug which will output the tag slug for your class, so if your tag name is Light Blue, the slug will be light-blue.

Next, we write the title attribute for the anchor simply embedding $tag->name . I’ve added the ucwords PHP function to capitalize the first character of each word that your tag is composed of in case you forgot when you first wrote your tag name. In this way all names will be consistent. If you want all lowercase numbers just remove this function.

Finally, we write the link for the tag and in the next line we close our anchor, not before adding the tag name again (I didn’t added the ucwords function here for the sake of explaining how would you write it instead).

We now only have to close the wrapping div and echo our $customtags variable, which now contains our tags with specific classes for each one of them. Now you can style each tag selecting them using the proper class.

Published by Elio Rivero

Software engineer, designer and photographer.

22 thoughts on “Output each WordPress tag with a specific class”

  2. Hi flippWP, this code must be used within The Loop, since it uses the function
    get_the_tags()
    However, since most templates for single pages or archive page use The Loop as its basis, you can use this code almost everywhere.

  3. Ok thanks. Will try again. Want to use for sure, but haven’t been able to get it functioning.

    Awesome write-up by the way. Can’t find anything else at all on this topic.

  4. Hi! This is exactly what I’m looking for, but I also can’t get it working. I load it into my functions.php file, and then this error appears at the top of every page:

    Warning: Invalid argument supplied for foreach() in /home/[snip]/wp-content/themes/chunk/functions.php on line 180

    Any chance you could help me troubleshoot? I’d be happy to buy you coffee. πŸ™‚

  16. […] Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚Π΅Π³ выводится с ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ CSS классом, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈ Π½Π° […]

    1. Actually, you don’t need this, because if your theme implements the function get_post_class, the tag slug will be outputted as a CSS class. You’ll see something like tag-your-tag-name. You can then use this as .tag-your-tag-name and use it to stylize your post background.

Leave a Reply