Grow your CSS skills. Land your dream job.

Last updated on:

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.

Reference URL

Comments

  1. Permalink to comment#

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

  2. 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. Permalink to comment#

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

    • Permalink to comment#

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

    • 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. 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.

    • 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. 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. 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 :)

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".