Add Image Upload Field to Custom Taxonomy

image-upload-field-custom-taxonomy

<?php

/* Add Image Upload to Series Taxonomy */

// Add Upload fields to "Add New Taxonomy" form
function add_series_image_field() {
	// this will add the custom meta field to the add new term page
	?>
	<div class="form-field">
		<label for="series_image"><?php _e( 'Series Image:', 'journey' ); ?></label>
		<input type="text" name="series_image[image]" id="series_image[image]" class="series-image" value="<?php echo $seriesimage; ?>">
		<input class="upload_image_button button" name="_add_series_image" id="_add_series_image" type="button" value="Select/Upload Image" />
		<script>
			jQuery(document).ready(function() {
				jQuery('#_add_series_image').click(function() {
					wp.media.editor.send.attachment = function(props, attachment) {
						jQuery('.series-image').val(attachment.url);
					}
					wp.media.editor.open(this);
					return false;
				});
			});
		</script>
	</div>
<?php
}
add_action( 'weekend-series_add_form_fields', 'add_series_image_field', 10, 2 );

// Add Upload fields to "Edit Taxonomy" form
function journey_series_edit_meta_field($term) {
 
	// put the term ID into a variable
	$t_id = $term->term_id;
 
	// retrieve the existing value(s) for this meta field. This returns an array
	$term_meta = get_option( "weekend-series_$t_id" ); ?>
	
	<tr class="form-field">
	<th scope="row" valign="top"><label for="_series_image"><?php _e( 'Series Image', 'journey' ); ?></label></th>
		<td>
			<?php
				$seriesimage = esc_attr( $term_meta['image'] ) ? esc_attr( $term_meta['image'] ) : ''; 
				?>
			<input type="text" name="series_image[image]" id="series_image[image]" class="series-image" value="<?php echo $seriesimage; ?>">
			<input class="upload_image_button button" name="_series_image" id="_series_image" type="button" value="Select/Upload Image" />
		</td>
	</tr>
	<tr class="form-field">
	<th scope="row" valign="top"></th>
		<td style="height: 150px;">
			<style>
				div.img-wrap {
					background: url('http://placehold.it/960x300') no-repeat center; 
					background-size:contain; 
					max-width: 450px; 
					max-height: 150px; 
					width: 100%; 
					height: 100%; 
					overflow:hidden; 
				}
				div.img-wrap img {
					max-width: 450px;
				}
			</style>
			<div class="img-wrap">
				<img src="<?php echo $seriesimage; ?>" id="series-img">
			</div>
			<script>
			jQuery(document).ready(function() {
				jQuery('#_series_image').click(function() {
					wp.media.editor.send.attachment = function(props, attachment) {
						jQuery('#series-img').attr("src",attachment.url)
						jQuery('.series-image').val(attachment.url)
					}
					wp.media.editor.open(this);
					return false;
				});
			});
			</script>
		</td>
	</tr>
<?php
}
add_action( 'weekend-series_edit_form_fields', 'journey_series_edit_meta_field', 10, 2 );

// Save Taxonomy Image fields callback function.
function save_series_custom_meta( $term_id ) {
	if ( isset( $_POST['series_image'] ) ) {
		$t_id = $term_id;
		$term_meta = get_option( "weekend-series_$t_id" );
		$cat_keys = array_keys( $_POST['series_image'] );
		foreach ( $cat_keys as $key ) {
			if ( isset ( $_POST['series_image'][$key] ) ) {
				$term_meta[$key] = $_POST['series_image'][$key];
			}
		}
		// Save the option array.
		update_option( "weekend-series_$t_id", $term_meta );
	}
}  
add_action( 'edited_weekend-series', 'save_series_custom_meta', 10, 2 );  
add_action( 'create_weekend-series', 'save_series_custom_meta', 10, 2 );

Hey man,

I know this is a year old, but I was wondering how you'd go about reading the image once it's been integrated. I've been able to make all this work with code but can't figure out for the life of me how to read the category in the template.

Cheers

image not save product_cat texonomy

+1
Thanks @mathetos, this saves my life!

How it display in Fronted?? Please

Thanks for your time @mathetos, I took your code and made some changes to use native wordpress term meta functions to avoid saving info on wp_options

Hello , how could I display the image in the front end ?
Thanks, have a good day !