Adding Fields to the Category, Tag and Custom Taxonomy Edit Screen in the WordPress Admin?

3 Views

The question is “How do I add one or more fields to the Category, Tag and Custom Taxonomy Edit Screen in the WordPress Admin?” This question was asked on the wp-hackers list August 1st 2010 and I offered a solution later that day. The original asker discussed the issue again today (Aug 21) which reminded me of the solution. Since it could be a common need I decided to post the solution including code up here for others to find in the future.

Post Views: 3

Related posts

Leave a Reply

7 comments

  1. I added new field ‘picture’ (input type file) to category with help of these

    add_action('category_edit_form_fields','category_edit_form_fields');
add_action('category_edit_form', 'category_edit_form');
add_action('category_add_form_fields','category_edit_form_fields');
add_action('category_add_form','category_edit_form');


function category_edit_form() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#edittag').attr( "enctype", "multipart/form-data" ).attr( "encoding", "multipart/form-data" );
        });
</script>
<?php 
}

function category_edit_form_fields () {
?>
    <tr class="form-field">
            <th valign="top" scope="row">
                <label for="catpic"><?php _e('Picture of the category', ''); ?></label>
            </th>
            <td>
                <input type="file" id="catpic" name="catpic"/>
            </td>
        </tr>
        <?php 
    }

    You are free to use any taxonomy, just replace category to your taxonomy name

  2. Also, if you want to add that field into the custom taxonomy form you just substitute category with the custom taxonomy name in the add_action function.

    Example: 

    add_action('{custom_taxonomy}_edit_form_fields','category_edit_form_fields');
add_action('{custom_taxonomy}_edit_form', 'category_edit_form');
add_action('{custom_taxonomy}_add_form_fields','category_edit_form_fields');
add_action('{custom_taxonomy}_add_form','category_edit_form');

  3. I have Added the add image and Remove image extra filed into custom taxonomy which name is insurance.

    /**
 * Plugin class
 **/
if ( ! class_exists( 'CT_TAX_META' ) ) {

class CT_TAX_META {

  public function __construct() {
    //
  }

 /*
  * Initialize the class and start calling our hooks and filters
  * @since 1.0.0
 */
 public function init() {
   add_action( 'insurance_add_form_fields', array ( $this, 'add_category_image' ), 10, 2 );
   add_action( 'created_insurance', array ( $this, 'save_category_image' ), 10, 2 );
   add_action( 'insurance_edit_form_fields', array ( $this, 'update_category_image' ), 10, 2 );
   add_action( 'edited_insurance', array ( $this, 'updated_category_image' ), 10, 2 );
   add_action( 'admin_enqueue_scripts', array( $this, 'load_media' ) );
   add_action( 'admin_footer', array ( $this, 'add_script' ) );
 }

public function load_media() {
 wp_enqueue_media();
}

 /*
  * Add a form field in the new category page
  * @since 1.0.0
 */
 public function add_category_image ( $taxonomy ) { ?>
   <div class="form-field term-group">
     <label for="category-image-id"><?php _e('Image', 'hero-theme'); ?></label>
     <input type="hidden" id="category-image-id" name="category-image-id" class="custom_media_url" value="">
     <div id="category-image-wrapper"></div>
     <p>
       <input type="button" class="button button-secondary ct_tax_media_button" id="ct_tax_media_button" name="ct_tax_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
       <input type="button" class="button button-secondary ct_tax_media_remove" id="ct_tax_media_remove" name="ct_tax_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
    </p>
   </div>
 <?php
 }

 /*
  * Save the form field
  * @since 1.0.0
 */
 public function save_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
     $image = $_POST['category-image-id'];
     add_term_meta( $term_id, 'category-image-id', $image, true );
   }
 }

 /*
  * Edit the form field
  * @since 1.0.0
 */
 public function update_category_image ( $term, $taxonomy ) { ?>
   <tr class="form-field term-group-wrap">
     <th scope="row">
       <label for="category-image-id"><?php _e( 'Image', 'hero-theme' ); ?></label>
     </th>
     <td>
       <?php $image_id = get_term_meta ( $term -> term_id, 'category-image-id', true ); ?>
       <input type="hidden" id="category-image-id" name="category-image-id" value="<?php echo $image_id; ?>">
       <div id="category-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 ct_tax_media_button" id="ct_tax_media_button" name="ct_tax_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
         <input type="button" class="button button-secondary ct_tax_media_remove" id="ct_tax_media_remove" name="ct_tax_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
       </p>
     </td>
   </tr>
 <?php
 }

/*
 * Update the form field value
 * @since 1.0.0
 */
 public function updated_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['category-image-id'] ) && '' !== $_POST['category-image-id'] ){
     $image = $_POST['category-image-id'];
     update_term_meta ( $term_id, 'category-image-id', $image );
   } else {
     update_term_meta ( $term_id, 'category-image-id', '' );
   }
 }

/*
 * Add script
 * @since 1.0.0
 */
 public function add_script() { ?>
   <script>
     jQuery(document).ready( function($) {
       function ct_media_upload(button_class) {
         var _custom_media = true,
         _orig_send_attachment = wp.media.editor.send.attachment;
         $('body').on('click', button_class, function(e) {
           var button_id = '#'+$(this).attr('id');
           var send_attachment_bkp = wp.media.editor.send.attachment;
           var button = $(button_id);
           _custom_media = true;
           wp.media.editor.send.attachment = function(props, attachment){
             if ( _custom_media ) {
               $('#category-image-id').val(attachment.id);
               $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $('#category-image-wrapper .custom_media_image').attr('src',attachment.url).css('display','block');
             } else {
               return _orig_send_attachment.apply( button_id, [props, attachment] );
             }
            }
         wp.media.editor.open(button);
         return false;
       });
     }
     ct_media_upload('.ct_tax_media_button.button'); 
     $('body').on('click','.ct_tax_media_remove',function(){
       $('#category-image-id').val('');
       $('#category-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
     });
     // Thanks: http://stackoverflow.com/questions/15281995/wordpress-create-category-ajax-response
     $(document).ajaxComplete(function(event, xhr, settings) {
       var queryStringArr = settings.data.split('&');
       if( $.inArray('action=add-tag', queryStringArr) !== -1 ){
         var xml = xhr.responseXML;
         $response = $(xml).find('term_id').text();
         if($response!=""){
           // Clear the thumb image
           $('#category-image-wrapper').html('');
         }
       }
     });
   });
 </script>
 <?php }

  }

$CT_TAX_META = new CT_TAX_META();
$CT_TAX_META -> init();

}

    Note: If you wanted to add this field to a different taxonomy, e.g. for a custom post type, you’d need to replace the reference to category with a reference to your own taxonomy slug. For example, if you add created a genre taxonomy you would hook this function via 

    add_action( 'taxonomy_add_form_fields', array ( $this, 'add_category_image' ), 10, 2 ).

    My taxonomy slug name is insurance.

    add_action( ‘insurance_add_form_fields’, array ( $this, ‘add_category_image’ ), 10, 2 );

    Use this code in your functions.php file.

  5. I realize this was asked a while ago, but WordPress has changed a bit since so I decided to develop a small script that simplifies the process of adding custom fields to taxonomies, and optionally lets you add columns to the terms table for each field. The script is called amarkal-taxonomy, and is part of the Amarkal WordPress framework.

    Using amarkal-taxonomy, adding a custom field simplifies to:

    // Add a text field to the 'category' taxonomy 'add' & 'edit' forms:
amarkal_taxonomy_add_field('category', 'cat_icon', array(
    'type'        => 'text',
    'label'       => 'Icon',
    'description' => 'The category's icon',
    'table'       => array(
        'show'      => true,  // Add a column to the terms table
        'sortable'  => true   // Make that column sortable
    )
));

// Then you can retrieve the data using:
$icon = get_term_meta( $term_id, 'cat_icon', true );

  6. You need to add your code in to your themes functions.php file – also if you want to add that field into the custom taxonomy form you just substitute category with the custom taxonomy name in the add_action function.
    Example :
    add_action(‘category_edit_form_fields’,’category_edit_form_fields’);
    will be
    add_action(‘custom_taxonomy_name_form_fields’,’function_name_to_hook_on’);