Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Style Tags in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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:


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 { 
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;

.taglink  { 

.tagbox a, .tagbox a:visited, .tagbox a:active { 

.tagcount { 
position: relative;

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

Display Tags with Post Count in WordPress

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.

Finding the css class used by the theme for 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 { 
border:1px solid #ccc;

.terms a:hover { 

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

Changed CSS style for tags below posts in WordPress

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.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Val Archer says:

    Hi – I’m looking for a way to list tags on a category-slug.php page. Do you perhaps know where I can find that tutorial?

    So far I’ve created a category [sitename]/category/recipes and a category-recipes.php.

    I’m tagging the recipes, e.g. Breakfast, Dinner, etc

    I’d like the Tags to display in category-recipes.php like this. I don’t know what I’m doing. I’m copying from my category.php file.

    Archives for the Category:

    now it lists all the posts tagged with Breakfast something like this:

    <a href="”>
    by / / posted in cat_name . ‘ ‘;} ?>

    now it lists all the posts tagged with Dinner something like this:

    <a href="”>
    by / / posted in cat_name . ‘ ‘;} ?>

    [Then at the end of all the Tags:]

    Please do you know where I can get help on this?

    thank you! – Val

  2. Magistar says:

    Code works fine for a tag cloud. However I would like to apply this to the post tags (meaning the tags associated with a post and their count, instead of the big list).

    I tried something with wp_get_post_tags but I did not really got it to work. Any suggestions?

  3. WPBeginner Staff says:

    You can use get_terms instead of get_tags, see this codex page:

  4. DER KUNSTBLOG says:

    That’s great, I’ve added your code to a site-specific plugin – but is there a possibility, to change it in a way, that the font-size vary on how often the tag is used? Any idea please? Thanks!

    • WPBeginner Staff says:

      Yes it is possible, in the first piece of code you would need to replace get_tags with wp_tag_cloud function. Like this:

      $wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');

  5. Guest says:

    How do you do the same thing with the custom tag cloud for Categories and Custom Taxonomies?

  6. Terence O'Neill says:

    Hey mate; How do I do the exact same(display with shortcode) for Categories and Custom Taxonomies? Thx for the tutorial btw. Works like a charm.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.