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.
Opens WPIDE on
Code
// 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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.