# Color Field for Categories and Terms

> Adds a color picker to categories (or any taxonomy) with a swatch column in the term list, and a helper to use each term's color in your theme.

- Type: PHP
- Runs: Run everywhere
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: taxonomies, term-meta, colors
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/term-color-field/

## Code

```php
// Taxonomies that get the color field.
$wpide_color_taxonomies = array( 'category' );

if ( ! function_exists( 'wpide_term_color' ) ) {
    function wpide_term_color( $term_id ) {
        return (string) sanitize_hex_color( (string) get_term_meta( (int) $term_id, '_wpide_color', true ) );
    }
}

foreach ( $wpide_color_taxonomies as $wpide_color_tax ) {
    add_action( $wpide_color_tax . '_add_form_fields', function () {
        wp_nonce_field( 'wpide_term_color', 'wpide_term_color_nonce' );
        echo '<div class="form-field"><label for="wpide-term-color">Color</label><input type="color" id="wpide-term-color" name="wpide_term_color" value="#3366cc"></div>';
    } );

    add_action( $wpide_color_tax . '_edit_form_fields', function ( $term ) {
        wp_nonce_field( 'wpide_term_color', 'wpide_term_color_nonce' );
        $color = wpide_term_color( $term->term_id );
        printf( '<tr class="form-field"><th scope="row"><label for="wpide-term-color">Color</label></th><td><input type="color" id="wpide-term-color" name="wpide_term_color" value="%s"></td></tr>', esc_attr( $color ? $color : '#3366cc' ) );
    } );

    $wpide_save_color = function ( $term_id ) {
        if ( ! isset( $_POST['wpide_term_color_nonce'] ) || ! wp_verify_nonce( sanitize_key( $_POST['wpide_term_color_nonce'] ), 'wpide_term_color' ) || ! current_user_can( 'edit_term', $term_id ) ) {
            return;
        }

        $color = isset( $_POST['wpide_term_color'] ) ? sanitize_hex_color( wp_unslash( $_POST['wpide_term_color'] ) ) : '';

        if ( $color ) {
            update_term_meta( $term_id, '_wpide_color', $color );
        } else {
            delete_term_meta( $term_id, '_wpide_color' );
        }
    };

    add_action( 'created_' . $wpide_color_tax, $wpide_save_color );
    add_action( 'edited_' . $wpide_color_tax, $wpide_save_color );

    add_filter( 'manage_edit-' . $wpide_color_tax . '_columns', function ( $columns ) {
        return array_slice( $columns, 0, 2, true ) + array( 'wpide_color' => 'Color' ) + array_slice( $columns, 2, null, true );
    } );

    add_filter( 'manage_' . $wpide_color_tax . '_custom_column', function ( $output, $column, $term_id ) {
        if ( 'wpide_color' === $column && wpide_term_color( $term_id ) ) {
            $output = '<span style="display:inline-block;width:20px;height:20px;border-radius:50%;background:' . esc_attr( wpide_term_color( $term_id ) ) . '" title="' . esc_attr( wpide_term_color( $term_id ) ) . '"></span>';
        }

        return $output;
    }, 10, 3 );
}

add_action( 'wp_head', function () use ( $wpide_color_taxonomies ) {
    if ( ( is_category() || is_tag() || is_tax() ) && in_array( get_queried_object()->taxonomy ?? '', $wpide_color_taxonomies, true ) && wpide_term_color( get_queried_object_id() ) ) {
        echo '<style>:root{--term-color:' . esc_html( wpide_term_color( get_queried_object_id() ) ) . '}</style>' . "\n";
    }
} );

add_filter( 'body_class', function ( $classes ) use ( $wpide_color_taxonomies ) {
    if ( ( is_category() || is_tag() || is_tax() ) && in_array( get_queried_object()->taxonomy ?? '', $wpide_color_taxonomies, true ) && wpide_term_color( get_queried_object_id() ) ) {
        $classes[] = 'term-color-set';
    }

    return $classes;
} );
```

## Notes

Use wpide_term_color( $term_id ) in templates, or the body class "term-color-set" with the --term-color variable on term archives.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Color Field for Categories and Terms" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/