How To Display A Tag Cloud On WordPress

A lot of people use the tag cloud widget in WordPress to show their post tags on their widgetized sidebar but you can also manually add a tag cloud to your theme which is perfect for creating a custom tag cloud page template or for adding them to your theme in areas that you don’t necessarily want widgetized.

This daily code snippet will show you how to display a custom tag cloud anywhere on your site via your theme files and style them to look clean and modern.

How To Display A Tag Cloud Manually

To display your tag cloud all you need to do is insert the “wp_tag_cloud()” function wherever you want to show your tags and apply your parameters. Below is a quick sample of a tag including some of the many parameters – see more at WordPress.org Tag Cloud Reference.

<?php wp_tag_cloud( array(
   'smallest' => 8, // size of least used tag
   'largest'  => 22, // size of most used tag
   'unit'     => 'px', // unit for sizing the tags
   'number'   => 45, // displays at most 45 tags
   'orderby'  => 'name', // order tags alphabetically
   'order'    => 'ASC', // order tags by ascending order
   'taxonomy' => 'post_tag' // you can even make tags for custom taxonomies
) ); ?>

Style Your Tag Cloud

You can easily style your tags with CSS to make them look better then a simple list of links. Below is some CSS if you would like to style the tags to look like the ones in my premium theme MyWorks Portfolio. Note, this will also change the look of your sidebar widgets since I am directly styling the  “tagcloud” div class, simply add a containing DIV in order to style them differently.

The Look:

The Code:

.tagcloud a{
    display:block;
    float:left;
    padding:4px 10px;
    margin-right:7px;
    margin-bottom:7px;
    background:#EEE;
    color:#666;
    font-size:11px;
    font-weight:bold;
    text-transform:lowercase;
    text-shadow:1px 1px 1px #FFF;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid #CCC;
    text-decoration:none;
}
.tagcloud a:hover{
    background:#F3F3F3;
    color:#000;
    text-decoration:none;
}

How To Display A Tag Cloud With A Plugin

You can also add your tags to any post or page with the Custom Tag Cloud Plugin. Simply install this plugin to be able to add customized tag clouds to your widgets, posts and pages using a shortcode. The plugin includes options for displaying posts, categories and link category tags. Plus you can set the number shown, add a custom tag separator and choose a cloud mode. And if you want more features (like size, layout and order) there is a premium version of the plugin as well.