In the development of ViralNova wordpress theme, I have to add a custom icon image for each category. I’ve tried the Category Images plugin but I want a more simple way so that I can use Font Awesome icons. We know by default Category only have 4 fields: Name, Slug, Parent, Description. If we can add a new field lets say Icons then that’s what I need!

default category field

default category field

It is pretty common knowledge that custom meta fields can be added to posts, pages and custom post types, but did you know that you can add custom meta fields to post tags, categories, and custom taxonomies as well? It’s actually pretty simple, though relatively undocumented. So in this quick tutorial I’m going to walk you through the process of added some custom meta fields to taxonomy.

We’ll use three functions to achieve this: one to add the field to the Add New page; one to add the field to the Edit Term page; and one to save the values of the custom field from both pages.

1. Add the field to the Add New page for the default Category

// Add term page
add_action( 'category_add_form_fields', 'ct_taxonomy_add_new_meta_field', 10, 2 );

function ct_taxonomy_add_new_meta_field() {
	// this will add the custom meta field to the add new term page
	?>
	<div class="form-field">
		<label for="term_meta[cat_icon]"><?php _e( 'Font Awesome Icons', 'clonetemplates' ); ?></label>
		<input type="text" name="term_meta[cat_icon]" id="term_meta[cat_icon]" value="">
		<p class="description"><?php printf(__( 'Choose your category icon from <a href="%s" target="_blank">Font Awesome Icons</a>. For example: <b>fa-wordpress</b>','clonetemplates' ), 'http://fontawesome.io/icons/'); ?></p>
	</div>
<?php
}

2. Add the field to the Edit Category page for the default Category

// Edit term page
add_action( 'category_edit_form_fields', 'ct_taxonomy_edit_meta_field', 10, 2 );

function ct_taxonomy_edit_meta_field($term) {

	// put the term ID into a variable
	$t_id = $term->term_id;

	// retrieve the existing value(s) for this meta field. This returns an array
	$term_meta = get_option( "taxonomy_$t_id" ); ?>
	<tr class="form-field">
	<th scope="row" valign="top"><label for="term_meta[cat_icon]"><?php _e( 'Font Awesome Icons', 'clonetemplates' ); ?></label></th>
		<td>
			<input type="text" name="term_meta[cat_icon]" id="term_meta[cat_icon]" value="<?php echo esc_attr( $term_meta['cat_icon'] ) ? esc_attr( $term_meta['cat_icon'] ) : ''; ?>">
			<p class="description"><?php printf(__( 'Choose your category icon from <a href="%s" target="_blank">Font Awesome Icons</a>. For example: <b>fa-wordpress</b>','clonetemplates' ), 'http://fontawesome.io/icons/'); ?></p>
		</td>
	</tr>
<?php
}

3. Save the field value

// Save extra taxonomy fields callback function.
add_action( 'edited_category', 'ct_save_taxonomy_custom_meta', 10, 2 );
add_action( 'create_category', 'ct_save_taxonomy_custom_meta', 10, 2 );

function ct_save_taxonomy_custom_meta( $term_id ) {
	if ( isset( $_POST['term_meta'] ) ) {
		$t_id = $term_id;
		$term_meta = get_option( "taxonomy_$t_id" );
		$cat_keys = array_keys( $_POST['term_meta'] );
		foreach ( $cat_keys as $key ) {
			if ( isset ( $_POST['term_meta'][$key] ) ) {
				$term_meta[$key] = $_POST['term_meta'][$key];
			}
		}
		// Save the option array.
		update_option( "taxonomy_$t_id", $term_meta );
	}
}

4. Usage

As i stated in the beginning of this post i need to display a different icon image for each category, so in that case i added this few lines of code to my theme’s content.php:

<?php foreach (get_categories() as $cat) :
					$cat_id   = $cat->term_id;
					$cat_data = get_option("taxonomy_$cat_id");?>

					<a href="<?php echo get_category_link($cat->term_id); ?>">
						<span class="category">
						<?php if (isset($cat_data['cat_icon'])){
							echo '<i class="fa '.$cat_data['cat_icon'].'"></i>';
						}
						?>
				 		<?php echo $cat->cat_name; ?>
				 		</span>
			 		</a>
			 	<?php endforeach; ?>

custom category field
Reference: https://pippinsplugins.com/adding-custom-meta-fields-to-taxonomies/