How To Customize The WordPress Tag Cloud

in WordPress Tutorials

The WordPress tag cloud is a sidebar or page element widget that displays all popular and most used post tags in a convenient layout. By default the WordPress tag cloud can display strange and over-sized fonts that don’t particularly match your blog or site’s native theme.

In this tutorial we are going to talk about customizing the WordPress tag cloud so that it matches or includes a custom style that you prefer. This tutorial involves editing an important WordPress source file so make sure to backup the related file or directory, before you begin, for complete safety.

The WordPress tag cloud widget is defined in the “category-template.php” source file which can be found in the “/wp-includes/” directory under your root blog directory. More specifically the complete directory listing should be “YourBlogsRootDirectory/wp-includes/category-template.php”.

After you have successfully located, and opened, the aforementioned source file you must locate the following segment of code:

The code segment above defines the default or pre-configured layout and style of the WordPress tag cloud and tag listings.

Font Size

The font size is defined by the “smallest” and “largest” tags (defined by the number) which is set at 8pt font for the smallest tags and 22pt font for the largest tags by default. The font sizes can be changed simply by editing the corresponding numbers after each tag. A common or recommended practice is to leave the alternate font size alone and only change the size in the direction you wish to go. For instance, if you would like the overall cloud font smaller then using the recommended method, you would leave the smaller font size alone and edit the larger font size; to increase font size you should use a vice-versa method.

Total Number of Tags

The ‘number’ command defines how many total tags display in the tag cloud. To change the total number of tags listed in the tag cloud you simply need to change the corresponding number. The number of total tags listed by default are 45.

A higher number means more tags display and the overall tag cloud size is increased. If you are interested in decreasing how much space the tag cloud takes up, it would be a good idea to lower the total number of tags.

Cloud Display Method

There are two methods or ways to display the tag cloud; in a list with each tag in its own line, or in a regular paragraph with a small space between each tag. To change the display method of the tag cloud you need to change the ‘flat’ command to one of the following:

  • ‘flat’- this is the default setting which displays the tag cloud in paragraph style
  • ‘list’- this is the alternate display method which displays each tag on its own line
  • Tag Order Listing

    The ‘orderby’ command defines how the tags are individually ordered.

    By default the WordPress tag cloud is ordered alphabetically by tag name. The alternative option is the change the tag ordering to display by ‘count’ first; which would translate to displaying the most used tags at the beginning of the list.

    To change the tag cloud ordering you simply need to swap the ‘name’ and ‘order’ tags. Which will then subsequently order the tag cloud by most used tags first which are then arranged in alphabetical order.

    Those are the most relevant tag cloud customizations available. Make sure to save your “category-template.php” file and copy it over the existing file on your web server/Wordpress blog install.

    Comments (6)

    • Comment by shubham pandey
      shubham pandey

      I am searching this post for my tag fonts.thanks a lot…but i am not getting the right way,can u please tell me how i use this in my category-template.php file?

    • Comment by Benjamin B
      Benjamin B

      Thank you for this, it was very helpful as I was looking in the wrong place (the css) for the tag_cloud.

      I would also love to take you up on your generous offer of a tutorial about designing a personalized tag cloud :-)

    • Comment by Abhishek

      Very useful, I will use this for my categories cloud :)

    • Comment by Briley Kenney
      Briley Kenney

      Glad the tutorial worked out for you guys! :)

      Amy, in order to change the individual color and font style for different tags I would recommend styling the tag cloud yourself using CSS.

      If you’re not sure how to utilize CSS to design a personalized tag cloud I would be happy to write a tutorial for you. :)

    • Comment by Amy

      Very nicely done. Seems simple enough to do. Good tip to know. Is there also a simple way in the same configuration file to adjust the font colors so that if the count is greater than 20 those tags are a different color?

    • Comment by Omer Greenwald
      Omer Greenwald

      Great tips Briley. You can also define tag cloud for specific category as described here