4

How to add a CSS Class to ul and anchor element of Tag Cloud generated through wp_tag_cloud function?

I want the default class for ul of wp-tag-cloud to be tag-cloud and anchor tag would have btn btn-xs btn-primary class.

<ul class="tag-cloud">
   <li><a class="btn btn-xs btn-primary" href="#">Apple</a></li>
   <li><a class="btn btn-xs btn-primary" href="#">Barcelona</a></li>
   <li><a class="btn btn-xs btn-primary" href="#">Ipod</a></li>
</ul>
3

The tags are wrapped in a DIV element in the latest WordPress version the day i'm writing this answer (4.7.5), and their class is tagcloud, so i will move to the next thing that is asked in the question.

The tags can be modified using the wp_generate_tag_cloud filter. By writing a preg_replace you can change the class to whatever you wish. Here is an example:

add_filter('wp_generate_tag_cloud', 'my_tag_cloud',10,1);
function my_tag_cloud($string){
   return preg_replace('/class="tag-link-.+ tag-link-position-.+"/', 'class="btn btn-xs btn-primary"', $string);
}

Anchors have the tag-link-X tag-link-position-Y class which X and Y are numbers.

3

We can also modify the anchor CSS class with the wp_generate_tag_cloud_data filter (4.3+).

With that filter we can modify the following anchor data:

  • id
  • url
  • role
  • name
  • title (removed in 4.8)
  • slug
  • real_count
  • class
  • font_size
  • formatted_count (added in 4.8)
  • aria_label (added in 4.8)
  • show_count (added in 4.8)

The style attribute is hardcoded, as can be seen from the 4.8 version:

$a[] = sprintf(
    '<a href="%1$s"%2$s class="%3$s" style="font-size: %4$s;"%5$s>%6$s%7$s</a>',
      esc_url( $tag_data['url'] ),
      $tag_data['role'],
      esc_attr( $class ),
      esc_attr( str_replace( ',', '.', $tag_data['font_size'] ) . $args['unit'] ),
      $tag_data['aria_label'],
      esc_html( $tag_data['name'] ),
      $tag_data['show_count']
  );

Note that we can change the font-size unit with:

wp_tag_cloud( [ 'unit' => 'rem', 'smallest' => 1, 'largest' => 4 ] );

or e.g. with the widget_tag_cloud_args filter for the tag cloud widgets.

Example:

Here we append the btn btn-xs btn-primary classes to anchors in all tag clouds:

add_filter( 'wp_generate_tag_cloud_data', function( $tag_data )
{
    return array_map ( 
        function ( $item )
        {
            $item['class'] .= ' btn btn-xs btn-primary';
            return $item;
        }, 
        (array) $tag_data 
    );

} );
  • Thanks. Does it support all the tags? I tried the style and it didn't work. – Jack Johansson Jun 5 '17 at 8:48
  • 1
    Alright i did. Also linked this question and insisted that @birgire requested a trac ticket for it ( JK ). – Jack Johansson Jun 5 '17 at 9:38
  • 2
    hehe best of luck with it ;-) – birgire Jun 5 '17 at 9:39
  • 1
    But note you can modify the unit from pt to e.g. em – birgire Jun 5 '17 at 9:42
  • 1
    You can modify the font-size unit but the style="font-size..." part is hardcoded. I thought you meant a ticket to make that more flexible, e.g. to be able to remove the font-size part completely with the wp_generate_tag_cloud_data ;-) – birgire Jun 5 '17 at 9:49
2

The classes are hardcoded in wp_generate_tag_cloud() function. Your only option there is to modify final string output via wp_generate_tag_cloud filter.

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.