1

I am trying to add a data-text attribute to the selected tag in the TagCloud widget. I want to do this to highlight the selected tag. I have so far managed to add a class to it, but the reason I need to add data-text is to copy the tag text into data-text so I can set the content in before and after elements.

Here is what I have :

add_filter( 'wp_generate_tag_cloud_data', function( $tags_data ) {
    $body_class = get_body_class();
    foreach( $tags_data as $key => $tag ) {
        if( in_array( 'tag-'.$tag['id'], $body_class)) {
            $tags_data[$key]['class'] =  $tags_data[$key]['class'] ." active-tag";
            $tags_data[$key]['data-text'] = $tag['name']; // This doesn't work
        }
    }
    return $tags_data;
});

How can I access the tag's HTML to add this data-text attribute ?
Thank you !

1

Looking at the related source in /wp-includes/category-template.php, we can see that there is no direct way of adding data attributes.

/**
 * Filters the data used to generate the tag cloud.
 *
 * @since 4.3.0
 *
 * @param array $tags_data An array of term data for term used to generate the tag cloud.
 */
$tags_data = apply_filters( 'wp_generate_tag_cloud_data', $tags_data );

$a = array();

// Generate the output links array.
foreach ( $tags_data as $key => $tag_data ) {
    $class = $tag_data['class'] . ' tag-link-position-' . ( $key + 1 );
    $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']
    );
}

What we can do here is hijack (or maybe stowaway with) the arial-label attribute and append our data attribute there:

add_filter( 'wp_generate_tag_cloud_data', function( $tags_data ) {
    $body_class = get_body_class();

    foreach( $tags_data as $key => $tag ) {
        if ( in_array( 'tag-' . $tag['id'], $body_class ) ) {
            $tags_data[$key]['class'] = $tags_data[$key]['class'] ." active-tag";
            $tags_data[$key]['aria_label'] .=  ' data-text="' . esc_attr( $tag['name'] ) . '" ';
        }
    }

    return $tags_data;
});

For testing, I used this little snippet to add a particular term to the body class, so that it would look like I was on the term archive page for a particular term:

add_filter( 'body_class', 'wpse_body_class' );
function wpse_body_class( $classes ) {
    $classes[] = 'tag-49';

    return $classes;
}

Looking through /wp-includes/category-template.php a little further, there is also the wp_generate_tag_cloud filter, which would allow us to parse the HTML and modify it to our liking, but that's a bit of a pain, so I went with the aria attribute hack instead.

    /**
     * Filters the generated output of a tag cloud.
     *
     * The filter is only evaluated if a true value is passed
     * to the $filter argument in wp_generate_tag_cloud().
     *
     * @since 2.3.0
     *
     * @see wp_generate_tag_cloud()
     *
     * @param array|string $return String containing the generated HTML tag cloud output
     *                             or an array of tag links if the 'format' argument
     *                             equals 'array'.
     * @param WP_Term[]    $tags   An array of terms used in the tag cloud.
     * @param array        $args   An array of wp_generate_tag_cloud() arguments.
     */
    return apply_filters( 'wp_generate_tag_cloud', $return, $tags, $args );
| improve this answer | |
  • 1
    Thank you very much, nice hijack ! – wqt Nov 1 '19 at 19:04

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.