Skip to content

Instantly share code, notes, and snippets.

@mathetos
Created September 20, 2014 21:37
Show Gist options
  • Save mathetos/1eea92f71934442671a7 to your computer and use it in GitHub Desktop.
Save mathetos/1eea92f71934442671a7 to your computer and use it in GitHub Desktop.
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

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

image not save product_cat texonomy

@panagiotisTB
Copy link

+1
Thanks @mathetos, this saves my life!

@malek1316
Copy link

How it display in Fronted?? Please

@ldgarc
Copy link

ldgarc 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

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