Answers for "custom-taxonomy-image-option-in-admin-panel"

custom-taxonomy-image-option-in-admin-panel

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();
    });

});