Tag Cloud Customization Without Plugins

I’m going to show how I used the built in wp_tag_cloud function to customize my tag cloud. I’m using BeTheme on my WordPress site, which I really like, but the Muffin tag cloud plugin seems flat and boring. There’s no way to set font sizes or include my blog categories in the tag cloud. I was surprised to find that these parameters seem to be advanced options that most free plugins don’t support. I don’t want to spend any money, and I really don’t want to mess around with too many plugins on my site, so I’ll just code the php myself, it’s really not that hard.

 
Wordpress - locating the Sidebar.php file

Locate the Sidebar Template

The wp_tag_cloud function is in the core WordPress files, it’s the function behind the scenes that all those tag cloud plugins call. I don’t want to mess with the core WordPress files, if I do I’ll have trouble later when I update WordPress. Instead, WordPress gives you access to lots of templates so you can customize your site to your heart’s content.

In my case, I want the tag cloud to appear at the bottom of the sidebar in the blog area, so I need to edit the Sidebar Template (sidebar.php). To find this file go to the WordPress Dashboard. Select Appearance and beneath that select Editor. On the right hand side of the page will be a dropdown of the themes you have loaded. The pulldown should default to your current theme. Below that is a list of all the files you have the ability to edit. Locate the template file that applies to your situation.

 

Add the wp_tag_cloud Function to the Template

I want my tag cloud to appear at the bottom of my blog sidebar, beneath the Archives and Calendar widgets. I’ll need to put the code block after all the muffin widgets are loaded, but before the <div> tag is closed. I want the tags to appear in random order, I want the font size to range from very small to very large depending on how often the tag appears on my site, and I want my blog categories to appear in the tag cloud. Below are the code snippets required to set these parameters.

First we do a simple test to determine if the template can find the wp_tag_cloud function. This step isn’t required, you could skip it, but it’s good practice to include it. If for some reason the function cannot be found the tag cloud won’t be generated, but the rest of the sidebar will render. If you don’t add this block and the wp_tag_cloud cannot be found, then the sidebar will be blank.

Next, we need to assign values to the arguments that will be passed to the wp_tag_cloud function. For the list of all the options you can customize refer to the WordPress wp_tag_cloud Function Reference Page

Now we simply need to pass those arguments to the wp_tag_cloud function

 

Putting It All Together

Code example of tag cloud customization

 

The Finished Tag Cloud

wp_tag_cloud_temp

The tag cloud is now displaying in variable sized fonts. I can see my blog categories there too, and if I reload the page the tag cloud changes order due to the RAND variable I assigned above.

So that’s it for this post. In the future, I may jazz it up a bit by adding custom CSS to the tag cloud, but I think that should be covered in a separate post.

Leave a Reply

Be the First to Comment!

Notify of
wpDiscuz