2

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.

  • You're not looping $tag_data, instead you're using $tags which hasn't been defined. Same with $counts and $real_counts. Actually a bunch of variables you're using which were never defined. – jgraup Jan 21 '16 at 16:25
0

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>
  • Ah got it :) I copied the function as it was in core. I see so I would have to get the tags first so those variables would be defined. Thanks :) – mantis Jan 21 '16 at 18:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.