how to add WordPress Category Extra Fields

Recently i worked on site that needed some modification to the category edit screen in order to display a different image for each category page. So Today I am going to explain about to create extra field into category edit section.

we need to do is add the extra fields to the category edit form using the hook edit_category_form_fields and we use a simple function that will print out the extra fields.

Here is the code , Paste this code in your function.php file of your active child theme (or theme).

<?php
//add extra fields to category edit form hook
add_action ( 'edit_category_form_fields', 'extra_category_fields');
//add extra fields to category edit form callback function
function extra_category_fields( $tag ) {    //check for existing featured ID
    $t_id = $tag->term_id;
    $cat_meta = get_option( "category_$t_id");
?>

<label for="cat_Image_url"><?php _e('Category Image'); ?></label>
<input type="text" name="Cat_meta[img]" id="Cat_meta[img]" size="3" style="width:60%;" value="<?php echo $cat_meta['img'] ? $cat_meta['img'] : ''; ?>">
            <span class="description"><?php _e('Image category url'); ?></span>
        
<label for="extra1"><?php _e('custom field'); ?></label>
<input type="text" name="Cat_meta[extra1]" id="Cat_meta[extra1]" size="25" style="width:60%;" value="<?php echo $cat_meta['extra1'] ? $cat_meta['extra1'] : ''; ?>">
            <span class="description"><?php _e('custom field'); ?></span>        

<label for="extra2"><?php _e('custom field'); ?></label>
<input type="text" name="Cat_meta[extra2]" id="Cat_meta[extra2]" size="25" style="width:60%;" value="<?php echo $cat_meta['extra2'] ? $cat_meta['extra2'] : ''; ?>">
            <span class="description"><?php _e('custom field'); ?></span>
        
<label for="extra3"></label>
            <textarea name="Cat_meta[extra3]" id="Cat_meta[extra3]" style="width:60%;"><?php echo $cat_meta['extra3'] ? $cat_meta['extra3'] : ''; ?></textarea>
            <span class="description"><?php _e('custom field'); ?></span>        
?php
}

As you can see, we added new fields and all of them are in an array Cat_meta[key] because it is the only way to create one row in the options table to save all of the category’s extra fields instead of a row for each field.

Next we need to save the extra fields in to the database once a user submits the category edit form and we do that using “updated_category” with a function that will run through each of the submitted fields and insert them to the database using the update_option function, like this:

add_action ( 'updated_category', 'save_extra_category_fileds');
   // save extra category extra fields callback function
function save_extra_category_fileds( $term_id ) {
    if ( isset( $_POST['Cat_meta'] ) ) {
        $t_id = $term_id;
        $cat_meta = get_option( "category_$t_id");
        $cat_keys = array_keys($_POST['Cat_meta']);
            foreach ($cat_keys as $key){
            if (isset($_POST['Cat_meta'][$key])){
                $cat_meta[$key] = $_POST['Cat_meta'][$key];
            }
        }
        //save the option array
        update_option( "category_$t_id", $cat_meta );
    }
}

From the code above you can see that all of the extra fields we’ve added are stored in the database’s options table with the name ‘category_ID’ , where ID is the id of the specific category we just edited and that means we can call this data in our plugins or theme files easily using the get_option function.

For example, if my category ID is 15 then my code will look like the following: