How to add a class to Tag cloud widget link?

by

I am currently trying to add styles to the links in the Tag Cloud Widget which I can see uses wp_tag_cloud() to output the cloud itself. The args in wp_tag_cloud() don’t include a classname which is what I want as styling the the title attribute isn’t very efficient and doesn’t allow for much growth. For example:

.widget .tagcloud a[title~="1"]{
    color: red;
  }
  .widget .tagcloud a[title~="2"]{
    color: yellow;
  }
  .widget .tagcloud a[title~="9999"]{
    color: purple;
  }

I found the wp_generate_tag_cloud_data filter which looks to be what I want but I must be missing something as it isn’t having any effect. Here’s what I have so far:

add_filter( 'wp_generate_tag_cloud_data', 'my_tag_cloud_data', 10, 1 );

function my_tag_cloud_data($tags_data){

foreach ( $tags as $key => $tag ) {
    $tag_id = isset( $tag->id ) ? $tag->id : $key;
    $tag_class="tag-link-" . $tag_id;

    $count = $counts[ $key ];
    $real_count = $real_counts[ $key ];

    if ($real_count > 20){
        $tag_class="tag-link-" . $tag_id . ' x-large';
    } elseif ($real_count > 15){
        $tag_class="tag-link-" . $tag_id . ' large';
    } elseif ($real_count > 7){
        $tag_class="tag-link-" . $tag_id . ' medium';
    } elseif ($real_count > 1){
        $tag_class="tag-link-" . $tag_id . ' small';
    } else {
        $tag_class="tag-link-" . $tag_id . 'x-small ';
    }

    if ( $translate_nooped_plural ) {
        $title = sprintf( translate_nooped_plural( $translate_nooped_plural, $real_count ), number_format_i18n( $real_count ) );
    } else {
        $title = call_user_func( $args['topic_count_text_callback'], $real_count, $tag, $args );
    }

    $tags_data[] = array(
        'id'         => $tag_id,
        'url'        => '#' != $tag->link ? $tag->link : '#',
        'name'       => $tag->name,
        'title'      => $title,
        'slug'       => $tag->slug,
        'real_count' => $real_count,
        'class'      => $tag_class,
        'font_size'  => $args['smallest'] + ( $count - $min_count ) * $font_step,
    );
}

return $tags_data;

}

I’ve tried playing with the priority and wrapping it in a function tied to the init hook but to no avail. I would be very grateful if someone could tell me what I’m doing wrong here.

1 Answer
1

You only want to add a class name based on the counts. Your above code looks like you may have copy/pasted from somewhere but you don’t need all that.

I just tested this with wp_generate_tag_cloud_data (#L869) and wp_tag_cloud() and it’s working.

Unfortunately for a basic test site like mine, the small count represents the largest number of tags for me. You might want to add your sizes based on a normalized font_size. Essentially do some math to turn it into 0-1 and select your classes with that value — not count.

add_filter( 'wp_generate_tag_cloud_data', 'my_tag_cloud_data', 10, 1 );

function my_tag_cloud_data( $tags_data ) {

    foreach ( $tags_data as $key => $tag ) {

        // get tag count
        $count = $tag [ 'real_count' ];

        // adjust the class based on the size
        if ( $count > 20 ) {
            $tags_data [ $key ] [ 'class' ] .= ' tag x-large';
        } elseif ( $count > 15 ) {
            $tags_data [ $key ] [ 'class' ] .= ' tag large';
        } elseif ( $count > 7 ) {
            $tags_data [ $key ] [ 'class' ] .= ' tag medium';
        } elseif ( $count > 1 ) {
            $tags_data [ $key ] [ 'class' ] .= ' tag small';
        } else {
            $tags_data [ $key ] [ 'class' ] .= ' tag x-small ';
        }
    }

    // return adjusted data
    return $tags_data;
}

CSS

<style>
    .tag.x-large {
        color: red;
    }
    .tag.large {
        color: green;
    }
    .tag.medium {
        color: blue;
    }
    .tag.small {
        color: yellow;
    }
    .tag.x-small {
        color: orange;
    }
</style>

Leave a Comment