WordPress: How to display only limited number of most popular tags in WordPress Tag Cloud and customize font size?

In WordPress, there is a widget called "Tag Cloud" which displays the Tags used in posts. This is useful when we want to display a list of Tags in widget areas so that visitors can quickly find related posts by Tag. In this post, we shall see -

• How to limit the number of most popular tags to display in the Tag Cloud widget?
• How to customize or keep the same font size of the Tags in the display?

Issue:

• How to limit the number of tags to display in the Tag Cloud widget?

 By default, the Tag Cloud widget does not have any settings to limit the number of tags to display on the front-end. As a result, as the number of tags grows, it would take a lot of space. Besides, it will not look good.

A better way would be to display only limited number of popular tags instead of all.

• How to keep the same font size of the Tags in the display?

 Again, by default, the size of the text for the Tag is larger for most common tags and smaller for less common tags. It looks bad if there are some tags which are big and some which are small. Though the size of the text indicate the popularity of the tag, it may be better in some cases to keep the same size. 

Solutions:

1) Display Most Popular Tags in WordPress Using Plugin
Using a plugin is the recommended way for most users since manually editing files may not be an issue for most users.

• Install and activate the Simple Tags plugin
• Visit Appearance » Widgets page and add ‘Tag Cloud (Simple Tags)’ widget to the sidebar. 
• Configure the plugin the way you want:
• Max tags to display
• Order by
• Font Size etc.

• How to limit the number of most popular tags to display in the Tag Cloud widget?
• In the plugin's setting above, you can set the "no of tags" to display.

• How to keep the same font size of the Tags in the display?
• To keep the same font size for the tags, set same size for min and max in the settings.
  

 

2) Display Most Popular Tags in WordPress Manually

• Add the following code to functions.php file to keep the same font size in the Tag Cloud widget
• Ideally, add the code in Child Theme so that changes are not lost during updates
• The following code should be between the PHP tags <?php.....?>
• If there are some codes already in the functions.php, paste the code just above the ending ?>

function wpb_tag_cloud() {

$tags = get_tags();

$args = array(

    'smallest'                  => 10,

    'largest'                   => 22,

    'unit'                      => 'px',

    'number'                    => 10, 

    'format'                    => 'flat',

    'separator'                 => " ",

    'orderby'                   => 'count',

    'order'                     => 'DESC',

    'show_count'                => 1,

    'echo'                      => false

);

$tag_string = wp_generate_tag_cloud( $tags, $args );

return $tag_string;

}

// Add a shortcode so that we can use it in widgets, posts, and pages

add_shortcode('wpb_popular_tags', 'wpb_tag_cloud');

// Enable shortcode execution in text widget

add_filter ('widget_text', 'do_shortcode'); 

(Credit: WPBeginner) 




The above code generates the top 10 tags in a cloud with number of posts in each tag.
After that it creates a shortcode wpb_popular_tags and enables shortcode in text widget.

• To use, enter the shortcode "wpb_popular_tags" in text widget.

• To increase the number of tags, edit: 'number'                    => ?? 

• To edit font size, edit:

    'smallest'                  => 10//tag with smallest count

    'largest'                   => 22 //tag with largest count

• To keep the same font size, enter same number.

Note: If we want to limit the number of tags to display, it is better to display the most popular tags as described above. 

The other methods given ahead will not display popular tags. If you want to keep the default WordPress tag cloud but limit the number of tags and keep same text size, refer the examples given below as well.

A) Limit the number of tags to display in the Tag Cloud widget?

• Add the following code to functions.php to limit the number of tags to display in the Tag Cloud widget
• Ideally, add the code in Child Theme so that changes are not lost during updates
• The following code should be between the PHP tags <?php.....?>
• If there are some codes already in the functions.php, paste the code just above the ending ?>

/*START - Limit Default WordPress Tag Could Count*/
//Register tag cloud filter callback
add_filter('widget_tag_cloud_args', 'tag_widget_limit');

//Limit number of tags inside widget
function tag_widget_limit($args){

 //Check if taxonomy option inside widget is set to tags
 if(isset($args['taxonomy']) && $args['taxonomy'] == 'post_tag'){
  $args['number'] = 30; //Limit number of tags
 }
 return $args;
}
/*END - Limit Default WordPress Tag Could Count*/

B) Change or Keep the same font size in Tag Cloud

• Add the following code to functions.php file to keep the same font size in the Tag Cloud widget
• Ideally, add the code in Child Theme so that changes are not lost during updates
• The following code should be between the PHP tags <?php.....?>
• If there are some codes already in the functions.php, paste the code just above the ending ?>

/* Change or kee[ same the font size - Tag Cloud*/
function custom_tag_cloud_widget($args) {
    $args['largest'] = 13; //largest tag
    $args['smallest'] = 13; //smallest tag
    $args['unit'] = 'px'; //tag font unit
    return $args;
}
add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud_widget' );

• To keep same size, enter same font size. Example: 13 above.
  

Note: If you are just limiting the number of tags using the manual process described in section 2(A), some tags will not be displayed and the order will be in alphabetical order. Therefore, it may be better to display popular tags only.