How to Change WordPress Tag Cloud Design and Font Size

Change WordPress Tag Cloud

Completely change WordPress tag cloud design and font size is tricky stuff that requires some editing from the backend. The tags are a public function in WordPress. Tag archives are work as like as a category archive. However, it is a non-hierarchical default taxonomy that effects all custom non-hierarchical taxonomies too. The default design of the tag cloud is priority based. As more as the posts are tagged by a single tag as much as the size of this particular tag is increasing. Moreover, it seems that it floats like a word cloud.

The tag cloud is a part of WordPress core functionality

There is a default tags widget to showcasing the tag cloud in the sidebar or footer area. However, it is not easy to change the default cloud-based font-size from the tag, because the default design is rooted in the core file. You cannot change it unless using a filter in your functions.php to overwrite the default font size style.

Here we are going through a simple process to change the look and feel of a tag cloud as well as its appearance. I just use a standard method, but you can quickly implement your style according to your theme design.

Here’s how you can change the WordPress tag cloud:

Step-1:

Open your functions.php file and add the following PHP filter:

function set_tag_cloud_same_sizes($args) {
$args['smallest'] = 12; $args['largest'] = 12; return $args; }
add_filter('widget_tag_cloud_args','set_tag_cloud_same_sizes');

Now, save and check the tag cloud font size again. Look, they all appear within the same size.

What we did in this piece of code

Tag clouds have two PHP arguments named the “smallest” and the “largest”. We are setting the same size for both arguments and adding a filter to pass the ‘widget_tag_cloud_args’ using ‘set_tag_cloud_same_sizes’ function. It will return the same size for most used and less used tags.

Step-2: Open your style.css file and add the following rules:

.tagcloud .tag-link a {
  background-color: #663399; 
  padding: 3px; 
  text-decoration: none; 
  font-size: 20pt; 
  border: 3px; solid #663399; 
  text-transform: uppercase; 
  color: #663399; 
}

What we did by this CSS code

WordPress core CSS code is .tagcloud and .tag-link. You can edit any WordPress website’s tag cloud by these two CSS classes. You can also create or assign a new CSS class for your WordPress theme from ‘functions.php’.

You can change color and background for the tag cloud

You can change color and background as your own choice.  This simple method works very quickly to change the design, appearance, and font size of the tag cloud. Now, you can showcase your tags anywhere including widget area footer, sidebar, or header. It is just up to your choice. However, for all of them, the design process remains the same as you implemented it.

Some Important things to remember about tag cloud:

  1. You cannot be able to change the font size of the tag cloud without adding the above filter code in functions.php.
  2. You can change the design and look without adding this filter as well. So, if you want to change the design only, you can do it quickly. The filter code is not necessary for this purpose.

Note: Dear readers, if you find these tips and tutorials helpful for you, please feel free to share them with your family and friends. Want to recreate your website or design a brand new theme? Please contact us. We can make a website as you need.