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 );
@barneyvaughan
Copy link

barneyvaughan commented Sep 10, 2015

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

@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