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.
I’m trying to add a CSS class “current” to tags for a single post. The few solutions I’ve found no longer seem to work. How would I do this?
That would vary based on your specific theme, if you reach out to your theme’s support they should be able to let you know where you can add that class for your tags.
My tags are listed serially.. No Border nothing nothing,,, just a text …please how do I give it a border with background color
How to i apply the css pls
My tag cloud doesn’t come as a cloud but as a list, since after each span a line break is inserted. How can I remove these line breaks?
Hi Hugo,
This article discusses how to style tags in different ways. If you want a tag cloud then you can use the default WordPress tag cloud widget. You can also use the template tag
I get that you showed another page on how to limit tags to a certain number, but how can I do it with this example included? It doesn’t seem to work using the method linked in combination with this.
I’m struggling with adding this, and I believe it’s with how my ‘Chosen’ Theme is limiting me. I’ve copied & pasted all into my php, & it is giving me errors left and right. I’m currently being told that there is an unknown “.” in this detail. Is there any way to format this without using the “.”s before .taglink, .tagbox, & .tagcount?
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:
Breakfast
now it lists all the posts tagged with Breakfast something like this:
<a href="”>
by / / posted in cat_name . ‘ ‘;} ?>
Dinner
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:]
</div
Please do you know where I can get help on this?
thank you! – Val
Have you tried adding:
<?php the_tags('posted in:', '' ,'' ); ?>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?
You can use get_terms instead of get_tags, see this codex page:
http://codex.wordpress.org/Function_Reference/get_terms
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!
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');
How do you do the same thing with the custom tag cloud for Categories and Custom Taxonomies?
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.