Customize WordPress Tag Cloud Widget

Yesterday I was working on developing custom template for one Czech guy. One of the things from the list is to do was customizing the WordPress Tag Cloud Widget for Categories. During this project there was a lot specific request, unique coding and tricks witch I’m gonna explain you here at WPError in next several days.

I was supposed to setup the Tag Cloud Widget to show only 11 categories by count from the categories list. Okay it might looks strange as we are talking about Tag cloud widget and categories in cloud, but let me explain it for you a little. The tag cloud is old WordPress function, but since WordPress 2.8 update it’s upgraded and it’s working with all taxonomies witch are by default tags and categories plus any other custom taxonomies.

[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
);
[/php]

Limit Tag Cloud Widget to 11 items and Order by Count for Categories

Tag Cloud Widget

To achieve the following widget look I was suposed to edit few tag cloud parameters:
1. Customize Font Size of items (smallest and largest)
2. Customize the order
3. Custom taxonomy select
 
 
 
 
 
 

#1 working tag cloud widget code with array

[php]
add_filter(‘widget_tag_cloud_args’,’set_number_tags’);
function set_number_tags($args) {
$args = array(‘smallest’ => 11, ‘largest’ => 11, ‘number’ => 11, ‘orderby’ => ‘count’, ‘taxonomy’ => ‘category’);
return $args;
}
[/php]

#2 working tag cloud widget code without array

[php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘smallest’] = 11;
$args[‘largest’] = 11;
$args[‘number’] = 11;
$args[‘orderby’] = ‘count';
$args[‘taxonomy’] = ‘category';
return $args;
}
[/php]

Here bellow I will write and explain you few other WP Tag Cloud snippets witch you can simply use simply by past into function.php file.

Changing the Number of Tags to Display on Widget

[php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘number’] = 20;
return $args;
}
[/php]

Changing the Largest and Smallest Font Sizes

Keys that we are going to use are smallest, largest and unit. As we want to display pixels on font size instead of points we have to use unit key aswell.
[php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘largest’] = 8;
$args[‘smallest’] = 12;
$args[‘unit’] = ‘px';
return $args;
}
[/php]

Excluding A Tag/Term From The Tag Cloud

Exclude key is comma separated term_id list to exclude. For example ‘exclude’ => 25,36 or $args[‘exclude’] = array(25, 36);. This means that tags with the term_id 25 or 36 will NOT be displayed on the widget.
[/php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘exclude’] = array(25, 36);
return $args;
}
[php]

<h3>Including A Tag/Term From The Tag Cloud</h3>
Include key is exact opposite to the exclude key, same comma separated term_id list but this time to include in widget function results. For example ‘include’ => 18, 38, 40 or $args[‘include’] = array(18, 38, 40);. This means that tags with the term_id 18 or 38 or 40 will be the only displayed terms on the widget.
[php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘include’] = array(25, 36);
return $args;
}
[/php]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>