custom taxonomy image option in admin panel

Question

I have created a custom taxonomy and want to have a image option for each category.

  function create_product_taxonomies()
  {
     // Add new taxonomy, make it hierarchical (like categories)
     $labels = array(
        'name' => _x('product_categories', 'taxonomy general name'),
        'singular_name' => _x('Product', 'taxonomy singular name'),
        'search_items' => __('Search Product Category'),
        'all_items' => __('All Product Categorie(s)'),
        'parent_item' => __('Parent Product Category'),
        'parent_item_colon' => __('Parent Product Category:'),
        'edit_item' => __('Edit Product Category'),
        'update_item' => __('Update Product Category'),
        'add_new_item' => __('Add New'),
        'new_item_name' => __('New Product Name'),
        'menu_name' => __('Product Categories'),

        );

   $args = array(
       'hierarchical' => true,
       'labels' => $labels,
       'show_ui' => true,
       'show_admin_column' => true,
       'query_var' => true,
       'rewrite' => array('slug' => 'product_categories', 'with_front' =>      true));

  register_taxonomy('product_categories', array('products'), $args);
  flush_rewrite_rules();
  }
  //hooks
  add_action('init', 'create_product_taxonomies', 0);

How can I provide user the option to upload a image for each category?

Answer 1

Before WordPress v4.4.2 Its very difficult but not possible to make custom meta field for terms but now its very easy and simple.

And you want to upload image so we create a js file and write some code in functions.php.

But first we create custom upload meta field.

In your function.php or where you write a code for register custom taxonomy and write this code:

First we create custom meta term field

add_action('product_categories_add_form_fields', 'add_term_image', 10, 2);
function add_term_image($taxonomy){
    ?>
    <div class="form-field term-group">
        <label for="">Upload and Image</label>
        <input type="text" name="txt_upload_image" id="txt_upload_image" value="" style="width: 77%">
        <input type="button" id="upload_image_btn" class="button" value="Upload an Image" />
    </div>
    <?php
}

Write your custom taxonomy before _add_form_fields in add_action() Like I write above"product_categories"_add_form_fields

Then we save meta term value

<?php
add_action('created_product_categories', 'save_term_image', 10, 2);
function save_term_image($term_id, $tt_id) {
    if (isset($_POST['txt_upload_image']) && '' !== $_POST['txt_upload_image']){
        $group = '#' . sanitize_title($_POST['txt_upload_image']);
        add_term_meta($term_id, 'term_image', $group, true);
    }
}
?>

Same as above write your taxonomy name after created_ in add_action Like created_product_categories

Now we create meta term field for edit

add_action('product_categories_edit_form_fields', 'edit_image_upload', 10, 2);
function edit_image_upload($term, $taxonomy) {
    // get current group
    $txt_upload_image = get_term_meta($term->term_id, 'term_image', true);
?>
    <div class="form-field term-group">
        <label for="">Upload and Image</label>
        <input type="text" name="txt_upload_image" id="txt_upload_image" value="<?php echo $txt_upload_image ?>" style="width: 77%">
        <input type="button" id="upload_image_btn" class="button" value="Upload an Image" />
    </div>
<?php
}

Now save the edited value

add_action('edited_product_categories', 'update_image_upload', 10, 2);
function update_image_upload($term_id, $tt_id) {
    if (isset($_POST['txt_upload_image']) && '' !== $_POST['txt_upload_image']){
        $group = '#' . sanitize_title($_POST['txt_upload_image']);
        update_term_meta($term_id, 'term_image', $group);
    }
}

Now we Move to **JS File for WordPress Media Uploader**

media-uploader.js

jQuery(document).ready(function($){

    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;

    // Runs when the image button is clicked.
    $('#upload_image_btn').click(function(e){

        // Prevents the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame ) {
            meta_image_frame.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
            title: meta_image.title,
            button: { text:  meta_image.button },
            library: { type: 'image' }
        });

        // Runs when an image is selected.
        meta_image_frame.on('select', function(){

            // Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

            // Sends the attachment URL to our custom image input field.
            $('#txt_upload_image').val(media_attachment.url);
        });

        // Opens the media library frame.
        meta_image_frame.open();
    });

});

And now Last Step

Go to functions.php

function image_uploader_enqueue() {
    global $typenow;
    if( ($typenow == 'products') ) {
        wp_enqueue_media();

        wp_register_script( 'meta-image', get_template_directory_uri() . '/js/media-uploader.js', array( 'jquery' ) );
        wp_localize_script( 'meta-image', 'meta_image',
            array(
                'title' => 'Upload an Image',
                'button' => 'Use this Image',
            )
        );
        wp_enqueue_script( 'meta-image' );
    }
}
add_action( 'admin_enqueue_scripts', 'image_uploader_enqueue' );

Call the Image

Call the Image

<?php
    $categories = get_terms('product_categories');

    foreach($categories as $term) {
        $upload_image = get_term_meta($term->term_id, 'term_image', true);
?>
        <img src="<?php echo $upload_image ?>">
<?php
    }
?>

Its my working code so please use it carefully.

Hope this code will help you. And if this code work just accept my answer :)