How to Style Tags in WordPress

WordPress allows you to sort your content in taxonomies. By default it comes with categories and tags. While categories can be used to sort your content into different sections, tags can be used to sort content into more specific topics. You can display tags used on your site in a tag cloud or in a list format. In this article, we will show you how to style tags in WordPress.

Displaying All Tags With Post Counts in WordPress

Some popular websites display their most popular tags as topics on their archives page or in the footer area. Here is how you can display all your post tags, with post count, and without using the tag cloud.

First thing you need to do is copy and paste this code in your theme’s functions.php file or site-specific plugin.

  function wpb_tags() {   $wpbtags =  get_tags();  foreach ($wpbtags as $tag) {   $string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "n"   ;  }   return $string;  }   add_shortcode('wpbtags' , 'wpb_tags' );  

This code simply displays all your tags with their post count next to them. However, to display it on your archives page or in a widget you need to use this shortcode:

[wpbtags]

Using this code alone will just show tag links and post count next to them. It will not make it look pretty. Lets add some CSS to make it pretty. Copy and paste this CSS into your theme’s stylesheet.

  .tagbox {   background-color:#eee;  border: 1px solid #ccc;  margin:0px 10px 10px 0px;  line-height: 200%;  padding:2px 0 2px 2px;    }  .taglink  {   padding:2px;  }    .tagbox a, .tagbox a:visited, .tagbox a:active {   text-decoration:none;  }    .tagcount {   background-color:green;  color:white;  position: relative;  padding:2px;  }  

Feel free to modify the CSS to meet your needs. This is how it looked on our demo site:

Styling Tags in Post Meta Information

Some WordPress themes nicely display tags under the post meta data information with publishing date, author and other meta links. However some themes may not style them at all, or you may want to style them differently.

Lets see how we can style tag links below a post in WordPress.

First you need to find out the CSS class used by your WordPress theme to display tags. To do that right click on tags and select inspect element from the browser menu.

This will split the browser screen to display developer tool box below the webpage. In the developer toolbox, you can see the CSS class used by your WordPress theme to display tags.

In the screenshot above you can see that the theme is using terms for CSS class. Now we will use this class in our theme or child theme’s stylesheet to override the default theme CSS.

  .terms a, .terms a:visited, .terms a:active {   background:#eee;  border:1px solid #ccc;  border-radius:5px;  text-decoration:none;  padding:3px;  margin:3px;  text-transform:uppercase;  }    .terms a:hover {   background:#a8281a;  color:#FFF;  }  

Feel free to modify CSS to match your theme’s colors. This is how the tags looked on our demo site:

You may notice the difference between the two screenshots other than the CSS changes, we also changed Tags to Tagged and removed the commas between tags. How did we do this?

We modified the_tags(); template tag in our single.php file like this:

  <?php the_tags('Tagged:', '' ,'' ); ?>  

If you want to limit the number of total tags displayed to let’s say 5 or something else, then refer to this article on how to show limited number of tags after post.

We hope this article helped you style tags in WordPress. Feel free to experiment with the CSS until you get the desired result.

If you liked this article, then subscribe to our YouTube Channel for more WordPress video tutorials. You can also find us on Google+ and Twitter.