How to add taxonomy images in WordPress without Plugin?
Step1: Add the Image Field
add_action( 'category_add_form_fields', 'add_category_image', 10, 2 ); function add_category_image ( $taxonomy ) { ?> <div class="form-field term-group"> <label for="image_id"><?php _e('Image'); ?></label> <input type="hidden" id="image_id" name="image_id" class="custom_media_url" value=""> <div id="image_wrapper"></div> <p> <input type="button" class="button button-secondary taxonomy_media_button" id="taxonomy_media_button" name="taxonomy_media_button" value="<?php _e( 'Add Image' ); ?>"> <input type="button" class="button button-secondary taxonomy_media_remove" id="taxonomy_media_remove" name="taxonomy_media_remove" value="<?php _e( 'Remove Image' ); ?>"> </p> </div> <?php }
Step2: Save the Image Field
add_action( 'created_category', 'save_category_image', 10, 2 ); function save_category_image ( $term_id, $tt_id ) { if( isset( $_POST['image_id'] ) && '' !== $_POST['image_id'] ){ $image = $_POST['image_id']; add_term_meta( $term_id, 'category_image_id', $image, true ); } }
Step3: Add the Image Field in Edit Form
add_action( 'category_edit_form_fields', 'update_category_image', 10, 2 ); function update_category_image ( $term, $taxonomy ) { ?> <tr class="form-field term-group-wrap"> <th scope="row"> <label for="image_id"><?php _e( 'Image' ); ?></label> </th> <td> <?php $image_id = get_term_meta ( $term -> term_id, 'image_id', true ); ?> <input type="hidden" id="image_id" name="image_id" value="<?php echo $image_id; ?>"> <div id="image_wrapper"> <?php if ( $image_id ) { ?> <?php echo wp_get_attachment_image ( $image_id, 'thumbnail' ); ?> <?php } ?> </div> <p> <input type="button" class="button button-secondary taxonomy_media_button" id="taxonomy_media_button" name="taxonomy_media_button" value="<?php _e( 'Add Image', 'taxt-domain' ); ?>"> <input type="button" class="button button-secondary taxonomy_media_remove" id="taxonomy_media_remove" name="taxonomy_media_remove" value="<?php _e( 'Remove Image', 'taxt-domain' ); ?>"> </p> </div></td> </tr> <?php }
Step4: Update the Image Field
add_action( 'edited_category', 'updated_category_image', 10, 2 ); function updated_category_image ( $term_id, $tt_id ) { if( isset( $_POST['image_id'] ) && '' !== $_POST['image_id'] ){ $image = $_POST['image_id']; update_term_meta ( $term_id, 'image_id', $image ); } else { update_term_meta ( $term_id, 'image_id', '' ); } }
Step5: Enqueue Media Library
add_action( 'admin_enqueue_scripts', 'load_media' ); function load_media() { wp_enqueue_media(); }
Step6: Display the Image in Column
add_filter( 'manage_edit-category_columns', 'display_image_column_heading' ); function display_image_column_heading( $columns ) { $columns['category_image'] = __( 'Image' ); return $columns; }
Step7: Display the Image on Frontend
$image_id = get_term_meta ( $term_id, 'image_id', true ); echo wp_get_attachment_image ( $image_id, 'full' );