How to Add Colorpicker Field to Category in WordPress

by emuslearner
0 comment

WordPress 4+ introduces the term meta. Terms are individual objects within a taxonomy and Meta comes from “metadata” which is simply additional data that can be tied to an object.  First, put colopicker in the backend of WordPress

In function.php the below function will show colorpicker field in “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

In the same way, add colorpicker field in the “Edit Category” screen by this below function

/** 
* 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">Select 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

We’ve added colorpicker in the “Add New Category” and “Edit Category” screen.  And the below function will sanitize and save term meta without the #

/** 
* 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'] ) &amp;&amp; ! 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.

/* enqueue wp-color-picker
*/ 
function category_colorpicker_enqueue( $taxonomy ) { 
if( null !== ( $screen = get_current_screen() ) &amp;&amp; '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' );

And then, we need to in initialize the colorpicker

/** 
* 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() ) &amp;&amp; '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 );

Colorpicker Field added to Category

We’ve done everything from the backend. Now, we’ll output the color as the background color of our categories in our theme. To do this we need to write this function

 

 

 

 

function the_category_colors() { 
$categories = get_the_category(); 
$color = get_term_meta( $category->term_id, '_category_color', true ); $color = ( ! empty( $color ) ) ? "#{$color}" : '#000000'; $separator = ''; $output = ''; 
if($categories){ 
foreach($categories as $category) { 
$output .= '<span class="post-category" style="background-color: #'. get_term_meta( $category->term_id, '_category_color', true ) . '; "><a href="'.get_category_link($category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a></span>'.$separator; } 
echo trim($output, $separator); } }

Get full code on GitHub

Finally, we’ll echo our category

<div class="post-meta">
    <?php the_category_colors(); ?>
    <?php echo get_term_meta( get_queried_object()->cat_ID, '_category_color', true );?>
</div>

Output:

Output of category color

0 comment

More Posts in this topic

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: