Do you use Tag Cloud in your WordPress websites?
The Tag Cloud widget shows a list of all the tags you’ve assigned to your posts. This widget is helpful because it gives your readers an at-a-glance view of your favorite subjects. In WordPress 5.0 or above, the WP Gutenberg block allows easily adding a simple tag cloud to posts and pages for displaying up to 45 of your most popular tags. The internal function ranks tag counts and calculates the font size of each tag accordingly. Each size is explicitly specified through the inline style of the link element. The more common tags will be displayed in the larger font size, and lets readers know what topics you write about most frequently.
Each tag is output as an HTML link element with a pattern that looks like:
<a href="{tag-url}"
class="tag-cloud-link tag-link-{id} tag-link-position-{pos}"
style="font-size: {point-size};"
aria-label="{tag-name} ({count} items)"
>{tag-name}</a>{tag-url}– The URL links to the tag page{id}– The taxonomy ID number of the tag{pos}– The order of position in the tag cloud{point-size}– The font size of the tag, which ranges between- minimum: 8 pt
- maximum: 22 pt
{tag-name}– The name of the tag{count}– The number of posts associating with the tag
Here’s an example of what the widget looks like:
How to Change the Font Size of Gutenberg Tag Cloud
Sometimes, the tags may look too big or too small to fit into your layout. Unfortunately, the Gutenberg block only possesses very limited options. There is no way for you to set the font size through the block panel of the Tag Cloud widget.
Nevertheless, you can change the font sizes of the Tag Cloud by inserting custom codes. The process can be implemented on either the server-side or the client-side. Three different ways are described and compared in the following tabs.
FAQ
POSSIBLE APPLICATIONS
- Display your tags grouped by language or by topic.
- Create an alphabetical index of your tags – think of a phone book for your tags.
- Display only specific tags in your tag cloud.
- Choose which tags to display in different sections of your blog.
- Change the sorting order in your tag cloud.
- Customize the links, the text, the font size or the separator of your tag cloud items.
- Prepend or append to each tag a custom character or the post count.
- Insert into each post a tag cloud using only the tags of this post.
- Easily manage huge amounts of tags or posts in the backend by dividing them into groups.
- Add a parent level to tags and make them hierarchical.
This free plugins provides a number of advanced features for designing custom Tag Clouds in WordPress. I think this the best choice if you don’t want to touch any codes. You can easily adjust the font sizes of the tags with its Gutenberg block.
Nonetheless, I like adding custom codes rather than using this plugin. I don’t want to install too many plugins, as it will slow my WordPress and increase the risk of having security vulnerabilities. It’s overwhelming to use a feature-rich plugin, if you just simply need to change the font sizes. I only recommend it if you’re looking for superior and specially designed tag clouds.
You can also manually add a tag cloud to your WordPress using the wp_tag_cloud() function directly. You can insert the PHP snippet as a shortcode. It is perfect for creating a custom tag cloud page or for adding them to your theme layout. The official function has already contained many options, including sizes, orders, and formats. It is quite flexible to create custom tag clouds without adding a filter hook.
Default Usage
<?php wp_tag_cloud( array(
'smallest' => 8, // size of least used tag
'largest' => 22, // size of most used tag
'unit' => 'pt', // unit for sizing the tags
'number' => 45, // displays at most 45 tags
'format' => 'flat' // format of the cloud display, 'flat', 'list', or 'array'
'separator' => "\n" // The text/space between tags
'orderby' => 'name', // order tags by 'name' or 'count'
'order' => 'ASC', // order tags by ascending order, 'ASC', 'DESC', or 'RAND'
'exclude' => null, // list of tags (term_id) to NOT be displayed, e.g. 5,27
'include' => null, // list of tags (term_id) to be only displayed, e.g. 8,22
'taxonomy' => 'post_tag' // you can even make tags for custom taxonomies
) ); ?>Example: Cloud limited in size and ordered by count rather than name
<?php wp_tag_cloud( 'smallest=15&largest=40&number=50&orderby=count' ); ?>If you don’t know how to add PHP code to WordPress posts or pages, I recommend using the following plugin to make PHP snippets as custom shortcodes.
How do you use Tag Clouds on your websites? Any other clever tips we missed? Share them below!
If you enjoy this post, please share it on Facebook and Twitter. You might also support us by making a donation through Ko-fi.