Lightning Rank - Private Blog Network

Customize The Default WordPress Tag Cloud Widget With A WordPress Filter

By Leave a Comment

This tutorial will show you how to customize the default WordPress tag cloud widget by using an easy to maintain and understand WordPress filter “widget_tag_cloud_args” that you can insert in your WordPress themes functions.php file.

Whilst developing WordPress themes from time to time I have had customize the default WordPress tag cloud widget to limit the number of tags shown in the tag cloud along with pulling tags from a custom taxonomy, to achieve this I used the WordPress filter we will discuss in this tutorial.

When customizing any default WordPress code it’s always best to use an available filter to hook into an existing WordPress function rather than edit any of the WordPress core files. Below are some resources relating to WordPress filters and the wp_tag_cloud function.

So why use a WordPress filter hook and not just code a whole new widget?

By customizing the default Wordress tag cloud widget our themes code-base is reduced from that of coding a full new widget file, also why re-code and existing WordPress component when we can simply adapt it to meet our requirements and save time in the process.

Creating A Blank Container Function

Firstly we will want to write an empty php function that hooks into the default WordPress tag cloud widget and allow us to pass and add settings to it. The code we are going to write will be placed within your themes functions.php file.

This code below is a basic php function container, notice we have named the function widget_custom_tag_cloud, this is so we can easily identify the function as our custom function that will eventually affect our default tag cloud widget. At the moment this function is empty and does not yet hook into the required WordPress filter to affect our tag cloud widget.

function widget_custom_tag_cloud() {

}

Hooking Into The WordPress widget_tag_cloud_args Filter

To hook our blank custom function above into the default WordPress tag cloud widget which will then allow us to make changes to the default tag cloud widgets output we need to actually hook into the correct WordPress filter which in this case is titled widget_tag_cloud_args.

As the function we are integrating with in WordPress is the widget_tag_cloud_args you will notice it is the first text element of the add_filter() code. The second text segment of the code widget_custom_tag_cloud then calls the settings we specify in our custom function above widget_custom_tag_cloud.

add_filter( 'widget_tag_cloud_args', 'widget_custom_tag_cloud' );

When both codes snippets are combined together they form the code block below.

function widget_custom_tag_cloud() {

}
add_filter( 'widget_tag_cloud_args', 'widget_custom_tag_cloud' );

Next we need to add $args to our custom function so we can pass php arguments to our function which will then affect the output of the tag cloud widget. The code below shows you where to add the $args.

function widget_custom_tag_cloud($args) {

}
add_filter( 'widget_tag_cloud_args', 'widget_custom_tag_cloud' );

function widget_custom_tag_cloud($args) {

}
add_filter( 'widget_tag_cloud_args', 'widget_custom_tag_cloud' );

Now we have a complete custom function that will allow us to pass arguments to the default tag cloud widget which will then affect the widgets output, lets get started and start configuring our custom widget.

Using Our Custom Tag Cloud Widget Function

A list of all setting we can pass to the default tag cloud widget via our custom function can be found on the WordPress Codex tag cloud page which we included above and here again.

Firstly lets add a setting that allows us to control the number of tags we want to display in the widgets output. Simple huh!

function widget_custom_tag_cloud($args) {

    // Control number of tags to be displayed - 0 no tags
    $args['number'] = 40;

    // Outputs our edited widget
    return $args;
}
add_filter( 'widget_tag_cloud_args', 'widget_custom_tag_cloud' );

Next what if we want to affect the tag cloud widgets text size for outputted tags, well we can easily do this by adding the code below to our custom function.

function widget_custom_tag_cloud($args) {

    // Control number of tags to be displayed - 0 no tags
    $args['number'] = 40;

    // Tag font unit px, pt, em
    $args['unit'] = 'px';

    // Maximum tag text size
    $args['largest'] = 24;

    // Minimum tag text size
    $args['smallest'] = 8;

    // Outputs our edited widget
    return $args;
}
add_filter( 'widget_tag_cloud_args', 'widget_custom_tag_cloud' );

Finally what if we wanted to add the taxonomy from our portfolio section, Well we can easily add taxonomies to our function and have the widget display them.

function widget_custom_tag_cloud($args) {

    // Control number of tags to be displayed - 0 no tags
    $args['number'] = 40;

    // Tag font unit px, pt, em
    $args['unit'] = 'px';

    // Maximum tag text size
    $args['largest'] = 24;

    // Minimum tag text size
    $args['smallest'] = 8;

    // Add custom taxonomy tags to the tag cloud widget
    $args['taxonomy'] = array('post_tag', 'your_custom_taxonomy');

    // Outputs our edited widget
    return $args;
}
add_filter( 'widget_tag_cloud_args', 'widget_custom_tag_cloud' );

You can also edit many more widgets by using this method by getting the correct filter from the API WordPress Filter section of the WordPress Codex. Hopefully you have learned a little more about wordpress functions, filter hooks and how to utilize them to your benefit to create cleaner theme code.

As always any questions or improvements please leave a comment.

Leave a Reply