How to display a tag cloud on WordPress

This post, we are going to display a tag cloud on WordPress. WordPress provides the tag cloud widget by default. Below is an example of tag cloud that display by the tag widget.

Change the number of tags to display

By default, the tag widget displays only 45 tags. This number is a good amount to display the tags on the screen. However, you can change the number as you like. To display all tags, the number setting is 0.

To modify the number of tags of tag widget, we will modify by using the widget_tag_cloud_args filter.

You can add the code below into the functions.php of the current theme.

add_filter('widget_tag_cloud_args', 'mms5_tag_cloud_limit');
function mms5_tag_cloud_limit($args)
{
    
    if (isset($args['taxonomy']) && $args['taxonomy'] == 'keyword_project_cpt') {
        $args['number'] = 0; // Number of tags to show
    }

    return $args;
}

For the code above, you can change the number as you like. To show all tags, you have to set the number as 0.

How To Display A Tag Cloud Manually

Using wp_generate_tag_cloud()

If you want to control how to display the tag cloud by yourself, you can use this code below and put it in the theme(functions.php) or your own plugin.

// Add a shortcode so that we can use it in widgets, posts, and pages
add_shortcode('test_popular_tags', array($this, 'test_tag_cloud'));

In order to display our tag cloud, we will use the shortcode as it shows in the code above.

Now we will create the callback function names test_tag_cloud.

/**
* display tags cloud
*/
function test_tag_cloud()
{
            // specific the taxonomy you want
            $tags = get_tags(
                array('taxonomy' => 'keyword_project_cpt')
            );

            // set the arguments for generating the tags
            $args = array(
                'smallest'                  => 12,
                'largest'                   => 22,
                'unit'                      => 'px',
                'number'                    => 0,
                'format'                    => 'flat',
                'separator'                 => " ",
                'orderby'                   => 'count',
                'order'                     => 'DESC',
                'show_count'                => 1,
                'echo'                      => false
            );

            // generate the tags
            $tag_string = wp_generate_tag_cloud($tags, $args);

            // return the result as string
            return $tag_string;
}

We use the get_tags function to retrieve all post tags. Then we use the wp_generate_tag_cloud function to generate a tag cloud. Below is an example.

The result depends on your theme style. You can change the style you like by using the inspection from browser and find the class or unique ID of the HTML element of tags. Then add the style(CSS) via your customize menu.

Using wp_tag_cloud()

While wp_generate_tag_cloud function provides more options for generating the tags cloud, wp_tag_cloud function just displays a tag cloud with a few options.

wp_tag_cloud function is often used for my work. Check more detail for this function from here.

Add tags cloud on the template

If you want to add the tag cloud quickly on the template, you can add this wp_tag_cloud function.

<?php
wp_tag_cloud(array(
                'smallest' => 8,
                'largest'  => 22,
                'unit'     => 'px',
                'number'   => 45,
                'orderby'  => 'name',
                'order'    => 'ASC',
                'taxonomy' => 'keyword_project_cpt'
));

Add tags cloud via shortcode

If you want to add the tag cloud by using the shortcode, you can add this code below.

add_shortcode('test_popular_tags_2', array($this, 'test_tag_cloud_2'));
function test_tag_cloud_2()
{
            wp_tag_cloud(array(
                'smallest' => 8,
                'largest'  => 22,
                'unit'     => 'px',
                'number'   => 45,
                'orderby'  => 'name',
                'order'    => 'ASC',
                'taxonomy' => 'keyword_project_cpt'
            ));
}

With shortcode, you can add the shortcode at the content editor, widgets and template.

Add the shortcode into the content editor, widgets and template

• [test_popular_tags_2] adds into the content editor and widgets.
• Using the code below and add into the template.

<?php echo do_shortcode("[test_popular_tags_2]"); ?>

That’s how to generate the tag cloud and display on the page.