How to add a custom field in custom taxonomy or how to add a image field for custom taxonomy like woocommerce produc_cat in wordpress

How to add a custom field in custom taxonomy or how to add a image field for custom taxonomy like woocommerce produc_cat in wordpress

For add a custom field in custom taxonomy or add a image field for custom taxonomy just copy below code and add it into your theme's functions.php file and change a taxonomy slug as per your need.

// actual action for add add_action( '{custom-taxonomy-slug}_add_form_fields', 'rj_video_categories_add_category_fields' );
//actual action for edit  add_action( '{custom-taxonomy-slug}_edit_form_fields','rj_video_categories_edit_category_fields'  );
add_action( 'video-categories_add_form_fields', 'rj_video_categories_add_category_fields' );
add_action( 'video-categories_edit_form_fields','rj_video_categories_edit_category_fields'  );
function rj_video_categories_add_category_fields() {
global $wpdb;
?>

<div class="form-field">
<label><?php _e( 'Thumbnail', 'mukam' ); ?></label>
<div id="video_categories_thumbnail" style="float: left; margin-right: 10px;"><img src="<?php echo esc_url( wc_placeholder_img_src() ); ?>" width="60px" height="60px" /></div>
<div style="line-height: 60px;">
<input type="hidden" id="video_categories_thumbnail_id" name="video_categories_thumbnail_id" />
<button type="button" class="upload_image_button button"><?php _e( 'Upload/Add image', 'mukam' ); ?></button>
<button type="button" class="remove_image_button button"><?php _e( 'Remove image', 'mukam' ); ?></button>
</div>
<script type="text/javascript">
if ( ! jQuery( '#video_categories_thumbnail_id' ).val() ) {
jQuery( '.remove_image_button' ).hide();
}
var file_frame;

jQuery( document ).on( 'click', '.upload_image_button', function( event ) {

event.preventDefault();
if ( file_frame ) {
file_frame.open();
return;
}

file_frame = wp.media.frames.downloadable_file = wp.media({
title: '<?php _e( "Choose an image", "mukam" ); ?>',
button: {
text: '<?php _e( "Use image", "mukam" ); ?>'
},
multiple: false
});
file_frame.on( 'select', function() {
var attachment = file_frame.state().get( 'selection' ).first().toJSON();

jQuery( '#video_categories_thumbnail_id' ).val( attachment.id );
jQuery( '#video_categories_thumbnail img' ).attr( 'src', attachment.sizes.thumbnail.url );
jQuery( '.remove_image_button' ).show();
});
file_frame.open();
});

jQuery( document ).on( 'click', '.remove_image_button', function() {
jQuery( '#video_categories_thumbnail img' ).attr( 'src', '<?php echo esc_js( wc_placeholder_img_src() ); ?>' );
jQuery( '#video_categories_thumbnail_id' ).val( '' );
jQuery( '.remove_image_button' ).hide();
return false;
});

</script>
<div class="clear"></div>
</div>
<?php
}
function rj_video_categories_edit_category_fields( $term ) {
global $wpdb;
$term_id = $term->term_id;
$thumbnail_id = get_option( 'video_cateroies_'.$term_id.'_thumbnail_id');

if ( $thumbnail_id ) {
$image = wp_get_attachment_thumb_url( $thumbnail_id );
} else {
$image = wc_placeholder_img_src();
}
?>
<tr class="form-field">
<th scope="row" valign="top"><label><?php _e( 'Thumbnail', 'mukam' ); ?></label></th>
<td>
<div id="video_categories_thumbnail" style="float: left; margin-right: 10px;"><img src="<?php echo esc_url( $image ); ?>" width="60px" height="60px" /></div>
<div style="line-height: 60px;">
<input type="hidden" id="video_categories_thumbnail_id" name="video_categories_thumbnail_id" value="<?php echo $thumbnail_id; ?>" />
<button type="button" class="upload_image_button button"><?php _e( 'Upload/Add image', 'mukam' ); ?></button>
<button type="button" class="remove_image_button button"><?php _e( 'Remove image', 'mukam' ); ?></button>
</div>
<script type="text/javascript">
if ( '0' === jQuery( '#video_categories_thumbnail_id' ).val() ) {
jQuery( '.remove_image_button' ).hide();
}

var file_frame;

jQuery( document ).on( 'click', '.upload_image_button', function( event ) {

event.preventDefault();

if ( file_frame ) {
file_frame.open();
return;
}

file_frame = wp.media.frames.downloadable_file = wp.media({
title: '<?php _e( "Choose an image", "mukam" ); ?>',
button: {
text: '<?php _e( "Use image", "mukam" ); ?>'
},
multiple: false
});

file_frame.on( 'select', function() {
var attachment = file_frame.state().get( 'selection' ).first().toJSON();

jQuery( '#video_categories_thumbnail_id' ).val( attachment.id );
jQuery( '#video_categories_thumbnail img' ).attr( 'src', attachment.sizes.thumbnail.url );
jQuery( '.remove_image_button' ).show();
});

file_frame.open();
});

jQuery( document ).on( 'click', '.remove_image_button', function() {
jQuery( '#video_categories_thumbnail img' ).attr( 'src', '<?php echo esc_js( wc_placeholder_img_src() ); ?>' );
jQuery( '#video_categories_thumbnail_id' ).val( '' );
jQuery( '.remove_image_button' ).hide();
return false;
});

</script>
<div class="clear"></div>
</td>
</tr>
<?php
}
add_action( 'created_term','rj_save_video_categories_fields' ,10, 3 );
add_action( 'edit_term', 'rj_save_video_categories_fields' , 10, 3 );
function rj_save_video_categories_fields( $term_id, $tt_id = '', $taxonomy = '' ) {
global $wpdb;
if ( isset( $_POST['video_categories_thumbnail_id'] ) && 'video-categories' === $taxonomy ) {
update_option('video_cateroies_'.$term_id.'_thumbnail_id',absint( $_POST['video_categories_thumbnail_id'] ));

}
}
add_filter( 'manage_edit-video-categories_columns', 'rj_manage_video_categories_columns' );
function rj_manage_video_categories_columns( $columns ) {
$new_columns          = array();
$new_columns['cb']    = $columns['cb'];
$new_columns['thumb'] = __( 'Image', 'mukam' );

unset( $columns['cb'] );

return array_merge( $new_columns, $columns );
}
add_filter( 'manage_video-categories_custom_column', 'rj_manage_video_categories_image_column', 10, 3 );
function rj_manage_video_categories_image_column( $columns, $column, $id ) {

if ( 'thumb' == $column ) {
$thumbnail_id = get_option('video_cateroies_'.$id.'_thumbnail_id');

if ( $thumbnail_id ) {

$image = wp_get_attachment_thumb_url( absint($thumbnail_id) );
} else {
$image = wc_placeholder_img_src();
}
$image = str_replace( ' ', '%20', $image );

$columns .= '<img src="' . esc_url( $image ) . '" alt="' . __( 'Thumbnail', 'mukam' ) . '" class="wp-post-image" height="48" width="48" />';

}

return $columns;
}


Notice:: If you got a error like wp.media is not a function then add below code in your functions.php file

function rj_load_wp_media_files() {
  wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'rj_load_wp_media_files' );