How to use meta data for each tag cloud a

by

Hope my title makes sense. Not sure how to word it. I am working on a wordpress site and am using a plugin to have a color for each category. I want the tag cloud to show that color as the background for each tag link.

Here is how I get the category color to be displayed in the page:

$color = get_term_meta($category[0]->cat_ID, 'color', true);

All works fine to echo the color as a hex value I just cannot figure out how I can make it the background color of each tag cloud link.

Anyone have any solutions?

Thanks so much for taking a look and helping me out!

Ponte

1 Answer
1

WordPress outputs a handy class name for each tag cloud link using the format .tag-link-{term_id}. This will allow us to target each term by its id.

This code will generate styles for term links output by the tag widget:

add_action( 'wp_head', 'wpse_tag_colors' );
function wpse_tag_colors() {
    $terms = get_terms( [
        'taxonomy'   => 'category',
        'hide_empty' => false,
    ] );

    if ( empty( $terms ) || is_wp_error( $terms ) ) {
        return;
    }

    $output="<!-- Tag widget color styles -->" . PHP_EOL;
    $output .= '<style>' . PHP_EOL;
    foreach ( $terms as $key => $term ) {
        $term_color = get_term_meta( $term->term_id, 'color', true );

        if ( ! $term_color ) {
            continue;
        }

        $output .= ".tag-link-{$term->term_id} { background-color: " .
                    sanitize_hex_color( $term_color ) . "; }" . PHP_EOL; 
    }
    $output .= '</style>' . PHP_EOL;
    $output .= '<!-- End Tag Widget color styles -->' . PHP_EOL;

    echo $output;
}

Note that the code above expects hex colors to be entered using a preceding #, e.g. #bada55. If you are not using hashed hex color values, you can adjust the code that outputs the background-color value accordingly. Also, make sure to use sanitize_hex_color_no_hash() for sanitization.

For the sake of completeness, here is the code that I used for adding and saving the color term metadata.

// Add color field to Add new category term page.
add_action( 'category_add_form_fields', 'wpse_category_add_form_fields', 10, 2 );
function wpse_category_add_form_fields( $taxonomy ) { ?>
    <div class="form-field term-group">
        <label for="color"><?php _e( 'Term Color', 'text_domain' ); ?> 
          <input type="text" id="color" name="color" value=""/>
        </label>
    </div><?php
}

// Add color field to Edit category term page.
add_action( 'category_edit_form_fields', 'wpse_category_edit_form_fields', 10, 2 );
function wpse_category_edit_form_fields( $term, $taxonomy ) {
    $term_color = get_term_meta( $term->term_id, 'color', true ); ?>

    <tr class="form-field term-group-wrap">
        <th scope="row">
            <label for="color">
              <?php _e( 'Term Color', 'text_domain' ); ?>
            </label>
        </th>
        <td>
            <input type="text" id="color" name="color" value="<?php
              echo sanitize_hex_color( $term_color ); ?>"/>
        </td>
    </tr><?php
}

// Save color for category term.
add_action( 'created_category', 'wpse_category_save_term_color', 10, 2 );
add_action( 'edited_category', 'wpse_category_save_term_color', 10, 2 );
function wpse_category_save_term_color( $term_id, $tag_id ) {
    //exit ( print_r( $_POST ) );
    if ( isset( $_POST[ 'color' ] ) ) {
        update_term_meta( $term_id, 'color', sanitize_hex_color( $_POST[ 'color' ] ) );
    }
}

Leave a Comment