/ Snippets / How to Customize WordPress Tag Cloud Widget

How to Customize WordPress Tag Cloud Widget

UPDATED:

One of the defaults WordPress widget is tag cloud widget. This widget allows you to display list of tags or categories or any custom taxonomies in your site. Today we’re going to learn how to customize the widget.

To customize WordPress Tag Cloud widget, there is a widget_tag_cloud_args filter available. Here’s a list of parameters accepted

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 
 <?php 

 

 // Parameters accepted by tag cloud widget

 // @url http://codex.wordpress.org/Function_Reference/wp_tag_cloud

 

 $args = array(

    'smallest'                  => 8, 

    'largest'                   => 22,

    'unit'                      => 'pt', 

    'number'                    => 45,  

    'format'                    => 'flat',

    'separator'                 => \"\n\",

    'orderby'                   => 'name', 

    'order'                     => 'ASC',

    'exclude'                   => null, 

    'include'                   => null, 

    'topic_count_text_callback' => default_topic_count_text,

    'link'                      => 'view', 

    'taxonomy'                  => 'post_tag', 

    'echo'                      => true,

    'child_of'                  => null

); ?>
view raw tags-widget.php hosted with ❤ by GitHub

For more info, please read it on WordPress Codex.

Limit Tag Cloud Widget to 20 items and Order by Count

1 2 3 4 5 6 7 8 9 
<?php



// Limit tag cloud widget to 20 items and order by count



add_filter('widget_tag_cloud_args','set_number_tags');

function set_number_tags($args) {

$args = array('number'    => 20, 'orderby'    => 'count');

return $args;

}
view raw functions.php hosted with ❤ by GitHub

By default, the widget will show up to 45 tags or categories and is order by name. In this example, we’re limiting the number of item to 20 and order it by count. Pretty straighforward.

Customize The Font Size of Each Item

If you notice, the font-size of each item in the widget is different. Tags or categories with higher number of articles will have a slightly bigger font size. Sometimes this looks bad. I prefer all of them to have same font size. Here’s the code to do so.

1 2 3 4 5 6 7 8 9 
<?php



// Customize font-size of tag cloud widget



add_filter('widget_tag_cloud_args','set_number_tags');

function set_number_tags($args) {

$args = array('smallest'    => 11, 'largest'    => 11);

return $args;

}
view raw functions.php hosted with ❤ by GitHub

Notice that we set the smallest and largest parameter with the same font size. By doing this, all of the tags or categories will have the same font size.

Here’s the final result. Looks much better. Notice here that I combine the two codes above.

Update:

In the comment section below, Tom asked how to display the tag cloud exactly as shown in the image above. Here’s the CSS code. This code belongs to style.css file of your child theme.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
/*

 *

 * Customizing WordPress Tag Cloud

 * @link http://wp.me/p33UjS-rl

 *

 */

 

.tagcloud a { 

    background: #333;

    border-radius: 3px;

    color: #fff;

    display: inline-block;

    margin: 2px 0;

    padding: 5px 10px;

}
view raw style.css hosted with ❤ by GitHub

Comments

  1. Lahaul Seth says

    I used to customize my tag clouds all the time when I was on Blogger. In wordpress, it’s different especially if you’re using Genesis and an error in php causes a lot of problem. Thanks for the tutorial.

    Reply

    • Editor says

      No, this method can be used for any WordPress theme. Since the tag cloud widget is the default WordPress widget, the code above can be used for any theme, not just for Genesis specific themes.

      Reply

  3. Tom says

    Thanks for this. Can you tell me how you get your tags to look like do in the image above? Is that a plugin? My tags are just text only but I’d like to display them in grey rectangles like you’ve done above. Thanks.

    Reply

  4. Steve says

    Excellent! This just really got me out of a tight spot. I had a look at a few tutorials and no luck. This worked first time. Thanks very much.

    Reply

Leave a Reply

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