Skip to content

How to Build A Tag Cloud Design and Font Size in WordPress

Change WordPress Tag Cloud

How to build a tag cloud matching your style

Some business owners who are using pre-built WordPress themes often need help with a common problem. That is the tag cloud. Changing WordPress tag cloud design and font size is a tricky stuff that requires code editing. The tags are a public function in WordPress. Tag archives works as like as a category archives.

However, tags are a non-hierarchical default taxonomy that affects all custom non-hierarchical taxonomies. The default design of the tag cloud is priority-based. That means, as more posts uses a single tag as much as the size of this tag increases.

If you use tag clouds on the first page of a website, it appears to float like a word cloud. The tag cloud is an integral aspect of WordPress fundamental functionality. A default widget is available to displays tag clouds in the sidebar or footer of a website.

The default cloud-based font size is difficult to change, because it is an integral part of wordpress core file. To change it, add a filter to your functions.php file that overrides the default font size settings.

Here, we are going through a simple process to change the look and feel of a tag cloud and its appearance. I use a standard method, but you can quickly implement any 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 recheck the tag cloud font size. You will see that all tags are appearing the same size.

What we did in this piece of code

Tag clouds have two PHP arguments, the “smallest” and the “largest.” We are setting both arguments to the same size and adding a filter to pass the ‘widget_tag_cloud_args’ using the ‘set_tag_cloud_same_sizes’ function. It will return the same size for all types of tags, no matter if it was used less or more.

Step 2:

You can also change the style of your tag cloud. 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 with this CSS code

WordPress core CSS code has two selectors named .tagcloud and .tag-link. With these two CSS selectors, you can edit any WordPress website’s tag cloud. Besides this, you can also create or assign a new CSS class for your WordPress theme from ‘functions.php’.

You can change the color and background to your own choice.  This simple method quickly changes the tag cloud’s design, appearance, and font size. You can showcase your tags anywhere, including the 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:

  • You cannot change the font size of the tag cloud without adding the above filter code to functions.php.
  • You can change the design and look using CSS style without adding this filter. If you want to change the layout only use CSS modification. The filter code is not necessary for this purpose.

Note: If you found this tip helpful, please share it with your circle. Want to recreate your website or design a brand new theme that matches your brand style? Feel free to contact us. We can create a minimal, fast, and easy-to-load website for you.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.