How To: 2 Ways to Add Colorful Tag Cloud in WordPress

Using the wp_tag_cloud function can add the tag cloud in any of your WordPress pages. It can easily tells readers which topics your blog have.

Usually, the Tag Cloud is simple with black or white text links, don’t you think it is bored with your eyes? Now, let me tell you 2 ways to add colorful tag cloud in your WordPress.

Here is the screenshot of my Blog:

How To: 2 Ways to Add Colorful Tag Cloud in WordPress

1. Use Simple Tags WordPress Plugin

If you install Simple Tags, you can easily add colorful tag cloud in your WordPress blog,

Just follow these steps:

Install Simple Tags

Go to Dashboard > Settings > Simple Tags > Tag Cloud

How To: 2 Ways to Add Colorful Tag Cloud in WordPress

(You can configure in this page)

Insert code <?php st_tag_cloud(); ?> in your sidebar.php of your current WordPress theme

2. Use simple php code

Author: bingu

I don’t like using too many plugins, so I choose this way.

Edit functions.php of your current WordPress theme, insert these codes:

function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$color = dechex(rand(0,16777215));
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
$text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

Then add wp_tag_cloud function:

<?php wp_tag_cloud('smallest=8&largest=24&number=50'); ?>

or add Tag Cloud in widget

That’s all, you can change the numbers 8, 24, 50, which stands for smallest font size , representing the smallest font, the largest font and tags numbers.

Now you can see the cool colorful tag cloud in your WordPress!

3 thoughts on “How To: 2 Ways to Add Colorful Tag Cloud in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>