This has been updated for WordPress 4+ with the introduction of Term Meta. The code is heavily commented.
:: My Functions – functions.php ::
The below function is to display the colorpicker on the “Add New Category” screen:
/**
* Add new colorpicker field to "Add new Category" screen
* - https://developer.wordpress.org/reference/hooks/taxonomy_add_form_fields/
*
* @param String $taxonomy
*
* @return void
*/
function colorpicker_field_add_new_category( $taxonomy ) {
?>
<div class="form-field term-colorpicker-wrap">
<label for="term-colorpicker">Category Color</label>
<input name="_category_color" value="#ffffff" class="colorpicker" id="term-colorpicker" />
<p>This is the field description where you can tell the user how the color is used in the theme.</p>
</div>
<?php
}
add_action( 'category_add_form_fields', 'colorpicker_field_add_new_category' ); // Variable Hook Name
The below function will add the colorpicker field to the “Edit Category” screen:
/**
* Add new colopicker field to "Edit Category" screen
* - https://developer.wordpress.org/reference/hooks/taxonomy_add_form_fields/
*
* @param WP_Term_Object $term
*
* @return void
*/
function colorpicker_field_edit_category( $term ) {
$color = get_term_meta( $term->term_id, '_category_color', true );
$color = ( ! empty( $color ) ) ? "#{$color}" : '#ffffff';
?>
<tr class="form-field term-colorpicker-wrap">
<th scope="row"><label for="term-colorpicker">Severity Color</label></th>
<td>
<input name="_category_color" value="<?php echo $color; ?>" class="colorpicker" id="term-colorpicker" />
<p class="description">This is the field description where you can tell the user how the color is used in the theme.</p>
</td>
</tr>
<?php
}
add_action( 'category_edit_form_fields', 'colorpicker_field_edit_category' ); // Variable Hook Name
The below function will sanitize and save the term meta without the # but there is a separate function which will sanitize it with the hash called sanitize_hex_color():
/**
* Term Metadata - Save Created and Edited Term Metadata
* - https://developer.wordpress.org/reference/hooks/created_taxonomy/
* - https://developer.wordpress.org/reference/hooks/edited_taxonomy/
*
* @param Integer $term_id
*
* @return void
*/
function save_termmeta( $term_id ) {
// Save term color if possible
if( isset( $_POST['_category_color'] ) && ! empty( $_POST['_category_color'] ) ) {
update_term_meta( $term_id, '_category_color', sanitize_hex_color_no_hash( $_POST['_category_color'] ) );
} else {
delete_term_meta( $term_id, '_category_color' );
}
}
add_action( 'created_category', 'save_termmeta' ); // Variable Hook Name
add_action( 'edited_category', 'save_termmeta' ); // Variable Hook Name
Now that the fields are added and data is being saved we need to enqueue the script(s) that put the colorpicker in place. Do note that in the first conditional I test against the taxonomy I’m showing the field on.
/**
* Enqueue colorpicker styles and scripts.
* - https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/
*
* @return void
*/
function category_colorpicker_enqueue( $taxonomy ) {
if( null !== ( $screen = get_current_screen() ) && 'edit-category' !== $screen->id ) {
return;
}
// Colorpicker Scripts
wp_enqueue_script( 'wp-color-picker' );
// Colorpicker Styles
wp_enqueue_style( 'wp-color-picker' );
}
add_action( 'admin_enqueue_scripts', 'category_colorpicker_enqueue' );
Finally, we need to initialize the colorpicker. Here I’ve chosen to just print it into the footer but it may be more beneficial, especially from a plugin perspective, to put this in an external file and enqueue it like a normal script.
/**
* Print javascript to initialize the colorpicker
* - https://developer.wordpress.org/reference/hooks/admin_print_scripts/
*
* @return void
*/
function colorpicker_init_inline() {
if( null !== ( $screen = get_current_screen() ) && 'edit-category' !== $screen->id ) {
return;
}
?>
<script>
jQuery( document ).ready( function( $ ) {
$( '.colorpicker' ).wpColorPicker();
} ); // End Document Ready JQuery
</script>
<?php
}
add_action( 'admin_print_scripts', 'colorpicker_init_inline', 20 );