Display a Tag Cloud

<?php wp_tag_cloud( array(

    'smallest' => 8,          // font size for the least used tag
    'largest'  => 22,         // font size for the most used tag
    'unit'     => 'px',       // font sizing choice (pt, em, px, etc)
    'number'   => 45,         // maximum number of tags to show
    'format'   => 'flat',     // flat, list, or array. flat = spaces between; list = in li tags; array = does not echo results, returns array
    'orderby'  => 'name',     // name = alphabetical by name; count = by popularity
    'order'    => 'ASC',      // starting from A, or starting from highest count
    'exclude'  => 12,         // ID's of tags to exclude, displays all except these
    'include'  => 13,         // ID's of tags to include, displays none except these
    'link'     => 'view',     // view = links to tag view; edit = link to edit tag
    'taxonomy' => 'post_tag', // post_tag, link_category, category - create tag clouds of any of these things
    'echo'     => true        // set to false to return an array, not echo it

) ); ?>

The default sizing, if none supplied, for this function is "pt" which is a bit unusual and often unreliable so make sure you change that parameter to how you size fonts normally on your site.

Less Weird Font Sizing

Tag clouds accomplish their varied font sizes by applying inline styling to each tag. The resulting font sizes can be really weird like style='font-size:29.3947354754px;'. Mike Summers proposes this solution:

<div id="tagCloud">
	<ul>
		<?php
			$arr = wp_tag_cloud(array(
				'smallest'             => 8,                      // font size for the least used tag
				'largest'                => 40,                    // font size for the most used tag
				'unit'                      => 'px',                 // font sizing choice (pt, em, px, etc)
				'number'              => 200,                 // maximum number of tags to show
				'format'                => 'array',            // flat, list, or array. flat = spaces between; list = in li tags; array = does not echo results, returns array
				'separator'          => '',                      //
				'orderby'              => 'name',           // name = alphabetical by name; count = by popularity
				'order'                   => 'RAND',          // starting from A, or starting from highest count
				'exclude'              => '',                      // ID's of tags to exclude, displays all except these
				'include'               => '',                      // ID's of tags to include, displays none except these
				'link'                       => 'view',             // view = links to tag view; edit = link to edit tag
				'taxonomy'         => 'post_tag',    // post_tag, link_category, category - create tag clouds of any of these things
				'echo'                    => true                 // set to false to return an array, not echo it
			));
			foreach ($arr as $value) {
				$ptr1 = strpos($value,'font-size:');
				$ptr2 = strpos($value,'px');
				$px = round(substr($value,$ptr1+10,$ptr2-$ptr1-10));
				$value = substr($value, 0, $ptr1+10) . $px . substr($value, $ptr2);
				$ptr1 = strpos($value, "class=");
				$value = substr($value, 0, $ptr1+7) . 'color-' . $px . ' ' . substr($value, $ptr1+7);
				echo '<li>' . $value . '</li> ';
			}
		?>
	</ul>
</div>

The result turns this:

<a href='url' class='tag-link-66' title='6 topics' style='font-size:29.3947354754px;'>Tag Name</a>

into this:

<a href='url' class='color-29 tag-link-66' title='6 topics' style='font-size:29px;'>Tag Name</a>

Notice the added bonus that the links has a class name of "color-29" now that it didn't before. Now you have a hook to colorize tag names based on their size.

Comments

  1. User Avatar
    George
    Permalink to comment#

    Thanks for this tutorial I was pulling my hair out trying to find a solution.

  2. User Avatar
    Jahangir
    Permalink to comment#

    Thanks for the info, but I need a little help on this.

    I am not very good in HTML but somehow I managed to make my tag cloud on my site dezineweblog.com very similar to this site toxel.com

    But on their site you can see the tags are aligned properly and have “arrow” image on left side. I don’t know how to add such image on the left side of my tags?

    Can you please help me? I will return to this page to see the answer.

    Thanks

  3. User Avatar
    Bruce
    Permalink to comment#

    I wonder what’s a good amount of tags to display? Is 45 too much for SEO purpose?

    • User Avatar
      Glen
      Permalink to comment#

      I think thats too much…. It should be somewhere between 20-25

    • User Avatar
      arya
      Permalink to comment#

      i need too bro such a tag cloud i dont know where i can build can you give me some url

  4. User Avatar
    Sam
    Permalink to comment#

    Thank you for the information. I am having this issue with where I wanted to create a cloud of links without using a CMS software. But the positioning is not working right. Anyway, thanks for the information.

    • User Avatar
      Sujan
      Permalink to comment#

      I am also trying to make a website with tag cloud but with no CMS. Can you please tell me how you did it? I don’t know how to make it.

  5. User Avatar
    Karl
    Permalink to comment#

    What I would love to see in a Tag Cloud, that if I could narrow it down to a Category. Let’s say that you do not want to show certain categories. So instead of exclude them, to include the ones you want. Is that even possible?

  6. User Avatar
    Bachtiar
    Permalink to comment#

    Awesome tutorial. Save my time to make custom tag cloud on my WP site.

    I wonder if I can also use other taxonomy with this tutorial :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag