Add ‘data-text’ attribute to TagCloud HTML

Question

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="https://wordpress.stackexchange.com/questions/351685/%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 );

Related Posts: