Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add Image Upload Field to 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 );
@aghadiinfotech
Copy link

aghadiinfotech commented Oct 16, 2015

image not save product_cat texonomy

@panagiotisTB
Copy link

panagiotisTB commented Jun 21, 2017

+1
Thanks @mathetos, this saves my life!

@malek1316
Copy link

malek1316 commented Dec 5, 2017

How it display in Fronted?? Please

@crinive
Copy link

crinive commented Dec 13, 2017

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

@infinity-work-dev
Copy link

infinity-work-dev commented Jan 27, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment