Isso foi atualizado para o WordPress 4+ com a introdução do termo Meta. O código é strongmente comentado.
:: Minhas Funções - functions.php ::
A função abaixo é para exibir o colorpicker na tela "Adicionar nova categoria":
/**
* 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
A função abaixo adicionará o campo colorpicker à tela "Editar categoria":
/**
* 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
A função abaixo irá limpar e salvar o termo meta sem o # , mas há uma função separada que irá higienizá-lo com o hash chamado 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
Agora que os campos foram adicionados e os dados estão sendo salvos, precisamos enfileirar os scripts que colocam o colorpicker no lugar. Observe que na primeira condicional eu testo a taxonomia na qual estou mostrando o campo.
/**
* 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' );
Finalmente, precisamos inicializar o colorpicker. Aqui eu escolhi apenas imprimi-lo no rodapé, mas pode ser mais benéfico, especialmente a partir de uma perspectiva de plug-in, para colocar isso em um arquivo externo e enfileirá-lo como um script normal.
/**
* 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 );