WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Style Tags in WordPress

How to Style Tags in WordPress

Last updated on May 29th, 2014 by Editorial Staff
58 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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:

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 { 
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:

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.

58 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

20 Comments

Leave a Reply
  1. Joe Smith says:
    Sep 13, 2020 at 9:12 pm

    This is great! Exactly what I was looking for and very classy. Just one question: If I wanted to add more space between the tags, how would i modify the css? I’ve tried changing several of the settings in the css above but none of them simply add whitespace between the tags.

    Reply
    • WPBeginner Support says:
      Sep 15, 2020 at 1:01 pm

      You would want to increase the padding for what you’re wanting :)

      Reply
  2. Ibiye Ambille says:
    Oct 11, 2019 at 4:13 pm

    Hi, i would love to move my post tag to below the featured image

    Reply
    • WPBeginner Support says:
      Oct 14, 2019 at 10:22 am

      For that, you would want to reach out to your specific theme’s support for assistance as each theme has its own location for the featured image.

      Reply
  3. Trishah says:
    Jul 15, 2019 at 4:05 pm

    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?

    Reply
    • WPBeginner Support says:
      Jul 16, 2019 at 10:39 am

      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.

      Reply
  4. uche Peter says:
    Jul 26, 2018 at 6:31 am

    My tags are listed serially.. No Border nothing nothing,,, just a text …please how do I give it a border with background color

    Reply
  5. Kingsolomon says:
    Jun 23, 2018 at 6:25 am

    How to i apply the css pls

    Reply
  6. Hugo says:
    Dec 22, 2017 at 6:14 am

    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?

    Reply
    • WPBeginner Support says:
      Dec 22, 2017 at 3:13 pm

      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

      <?php wp_tag_cloud(); ?>
      Reply
  7. bob says:
    Jan 20, 2017 at 2:39 pm

    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.

    Reply
  8. Amy Croson says:
    Nov 27, 2016 at 4:13 pm

    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?

    Reply
  9. Val Archer says:
    Feb 9, 2016 at 7:57 am

    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

    Reply
    • WPBeginner Support says:
      Feb 9, 2016 at 8:21 pm

      Have you tried adding:

      <?php the_tags('posted in:', '' ,'' ); ?>

      Reply
  10. Magistar says:
    Nov 19, 2014 at 12:00 pm

    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?

    Reply
  11. WPBeginner Staff says:
    May 30, 2014 at 9:49 pm

    You can use get_terms instead of get_tags, see this codex page:
    http://codex.wordpress.org/Function_Reference/get_terms

    Reply
  12. DER KUNSTBLOG says:
    May 30, 2014 at 6:14 pm

    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!

    Reply
    • WPBeginner Staff says:
      May 30, 2014 at 9:29 pm

      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');

      Reply
  13. Guest says:
    May 30, 2014 at 10:10 am

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

    Reply
  14. Terence O'Neill says:
    May 30, 2014 at 12:28 am

    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.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
MainWP
MainWP Coupon
Get 15% OFF on MainWP WordPress multisite manager plugin.
Sprout Invoices
Sprout Invoices Coupon
Get 50% OFF on Sprout Invoices WordPress invoicing plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.