Over the years, WPBeginner has received a lot of questions about tags, one of them being whether you should style tags in WordPress to make them look more prominent.
Tags help you organize your content into topics. They’re like hashtags for your WordPress blog posts and help users discover more content. But, in our experience, if they don’t stand out visually, they might get overlooked.
In this article, we’ll show you how to easily style tags in WordPress to get more user engagement and page views on your website.
How to Display Tags in WordPress
WordPress comes with two main taxonomies called categories and tags. While categories are used for major areas of your content, tags allow you to sort content into more specific topics.
Many popular WordPress themes display tags at the top or bottom of your posts by default.
However, you can also display tags on archive pages, footer, sidebars, and almost anywhere you want in WordPress.
To insert a tag cloud in your posts, pages, and sidebar widgets, you can simply add the ‘Tag Cloud’ block.
A tag cloud gives each tag a different font size based on the number of posts. You can also choose to display the number of posts next to each tag.
Those are just the default options available in WordPress, but what if you wanted to customize your tags even more? We’ll show you how.
Let’s take a look at how to easily style tags in WordPress.
Styling The Default Tag Cloud in WordPress
After you have added the Tag Cloud block to a post or page, you can customize it by adding custom CSS.
The tag cloud block automatically includes default WordPress-generated CSS classes that can be used to style them.
To add custom CSS to your WordPress site, simply go to Appearance » Customize page and switch to the Additional CSS tab.
You can start by adding this custom CSS code as a starting point.
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
As you can see, you can use the .tag-link-position class to adjust the style based on the position of links. Tags with more posts are higher in position, and tags with fewer posts are lower.
If you would like all tags in your tag cloud block to have the same size, then you can use the following CSS instead:
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
This is how it looked on our test site:
Styling Post Tags in WordPress
Besides styling your tag clouds, you may also want to style post tags that are displayed on your individual blog posts. Usually, your WordPress theme would display them at the top or bottom of the post title or post content.
You can mouse over the tags and right-click to use the Inspect tool to view the CSS classes used by your WordPress theme.
After that, you can use these CSS classes in your custom CSS. Following is a sample code based on CSS classes on our test theme:
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
This is how it looked on our test site.
Creating a Custom Tag Cloud in WordPress
The default tag cloud block is easy to use, but some advanced users may want to customize it so that they can have more flexibility.
This method allows you to add your own HTML and CSS classes surrounding the tag cloud. You can then use it to customize the appearance of tag cloud to your own requirements.
The first thing you need to do is copy and paste this code in your theme’s functions.php file or in a code snippets plugin:
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= ”. $tag->name . ”. $tag->count .” . “n” ;
}
return $string;
}
add_shortcode(‘wpbtags’ , ‘wpb_tags’ );
We recommend adding this code with WPCode, the best code snippets plugin for WordPress. It allows you to easily add custom code in WordPress without editing your theme’s functions.php file, so you won’t break your site.
To get started, install and activate the free WPCode plugin. If you need help, see our tutorial on how to install a WordPress plugin.
Once the plugin is activated, head to Code Snippets » Add Snippet from the WordPress dashboard.
Then, hover your mouse over the ‘Add Your Custom Code (New Snippet)’ option and click the ‘Use snippet’ button.
From here, you need to select ‘PHP Snippet’ as your code type from the list of options that appear on the screen.
Next, you can add a title for the snippet at the top of the page. This can be anything to help you remember what the code is for.
Then, simply paste the code from above into the ‘Code Preview’ box.
After that, all you need to do is toggle the switch from ‘Inactive’ to ‘Active’ and click the ‘Save Snippet’ button.
This code adds a shortcode that displays all your tags with their post count next to them.
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 the post count next to them. Let’s add some CSS to make it look better. Simply copy and paste this custom CSS to your website.
.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:
We hope this article helped you learn how to easily style tags in WordPress. You may also want to see our guide on how to hide or style your subcategories in WordPress or see this list of handy WordPress tips, tricks, and hacks.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
