feat(taxonomy): add color picker to term edit and creation

Integrated a color picker for the publication status taxonomy terms.
- Added color fields to both term edit and add new term screens.
- Enqueued color picker script and styles.
- Implemented saving mechanism for color data.

This enhances user experience by allowing custom colors assignment to taxonomy terms.
This commit is contained in:
Kumi 2024-08-03 17:03:29 +02:00
parent 9f6fdeb85e
commit 594a694178
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 63 additions and 0 deletions

View file

@ -0,0 +1,3 @@
jQuery(document).ready(function($) {
$('.color-field').wpColorPicker();
});

View file

@ -266,6 +266,66 @@ function create_publication_status_taxonomy()
add_action('init', 'create_publication_status_taxonomy', 0); add_action('init', 'create_publication_status_taxonomy', 0);
// Add color picker to publication status taxonomy
function add_publication_status_color_field($term)
{
$color = get_term_meta($term->term_id, 'publication_status_color', true);
?>
<tr class="form-field">
<th scope="row" valign="top">
<label for="publication_status_color"><?php _e('Color', 'duck-behavior-journal'); ?></label>
</th>
<td>
<input type="text" name="publication_status_color" id="publication_status_color" value="<?php echo esc_attr($color) ? esc_attr($color) : '#ffffff'; ?>" class="color-field" />
<p class="description"><?php _e('Choose a color for this publication status.', 'duck-behavior-journal'); ?></p>
</td>
</tr>
<?php
}
add_action('publication_status_edit_form_fields', 'add_publication_status_color_field', 10, 2);
// Add color picker to add new term screen
function add_publication_status_color_field_new($term)
{
?>
<div class="form-field">
<label for="publication_status_color"><?php _e('Color', 'duck-behavior-journal'); ?></label>
<input type="text" name="publication_status_color" id="publication_status_color" value="#ffffff" class="color-field" />
<p class="description"><?php _e('Choose a color for this publication status.', 'duck-behavior-journal'); ?></p>
</div>
<?php
}
add_action('publication_status_add_form_fields', 'add_publication_status_color_field_new', 10, 2);
// Save the color meta data
function save_publication_status_color_meta($term_id)
{
if (isset($_POST['publication_status_color']) && !empty($_POST['publication_status_color'])) {
update_term_meta($term_id, 'publication_status_color', sanitize_hex_color($_POST['publication_status_color']));
} else {
delete_term_meta($term_id, 'publication_status_color');
}
}
add_action('edited_publication_status', 'save_publication_status_color_meta', 10, 2);
add_action('create_publication_status', 'save_publication_status_color_meta', 10, 2);
// Enqueue the color picker script
function enqueue_color_picker($hook_suffix)
{
// Load only on the term edit page
if (strpos($hook_suffix, 'edit-tags.php') === false) {
return;
}
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('custom-color-picker', get_template_directory_uri() . '/assets/js/custom-color-picker.js', array('wp-color-picker'), false, true);
}
add_action('admin_enqueue_scripts', 'enqueue_color_picker');
function add_article_meta_boxes() function add_article_meta_boxes()
{ {
add_meta_box( add_meta_box(