<?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.
Thanks for this tutorial I was pulling my hair out trying to find a solution.
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
I wonder what’s a good amount of tags to display? Is 45 too much for SEO purpose?
I think thats too much…. It should be somewhere between 20-25
i need too bro such a tag cloud i dont know where i can build can you give me some url
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.
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.
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?
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 :)