Add Fields to Taxonomy Terms

  1. Fields on add new term screen
  2. Fields on edit term screen
  3. Save fields
  4. Easy example

Today WordPress has meta field support for nearly everything – post types, users, comments, blogs within a multisite network and yes, taxonomy terms.

Screenshots of what we are going to create:

Simple text field on add new term screen in WordPress admin area
We are going to create a simple text field and this is how it is going to look on add new term pages.
We added a custom text field and populated it with the data on edit term screen
This is how our field is going to look on edit term pages.

1. Add Fields to the Add New Term Screen

To add the fields on the “Add new” screen we are going to use an action hook {Taxonomy}_add_form_fields and all we have to do is to echo the fields.

add_action( 'post_tag_add_form_fields', 'misha_add_term_fields' );
 
function misha_add_term_fields( $taxonomy ) {
 
	echo '<div class="form-field">
	<label for="misha-text">Text Field</label>
	<input type="text" name="misha-text" id="misha-text" />
	<p>Field description may go here.</p>
	</div>';
 
}

Result:

Simple text field on add new term screen in WordPress admin area
We can add fields to the Add New tag page with post_tag_add_form_fields action hook.

2. Add Fields to the Edit Term Screen

Very similar to the previous part of the tutorial, the main difference is that we have to populate the field in case the metadata is presented.

Let’s begin with an action hook {Taxonomy}_edit_form_fields. For post_tag taxonomy it is going to be post_tag_edit_form_fields, for your custom taxonomy it could be misha_taxonomy_edit_form_fields.

add_action( 'post_tag_edit_form_fields', 'misha_edit_term_fields', 10, 2 );
 
function misha_edit_term_fields( $term, $taxonomy ) {
 
	$value = get_term_meta( $term->term_id, 'misha-text', true );
 
	echo '<tr class="form-field">
	<th>
		<label for="misha-text">Text Field</label>
	</th>
	<td>
		<input name="misha-text" id="misha-text" type="text" value="' . esc_attr( $value ) .'" />
		<p class="description">Field description may go here.</p>
	</td>
	</tr>';
 
}

And we have it:

We added a custom text field and populated it with the data on edit term screen
We can add fields to the Edit Tag page with post_tag_edit_form_fields action hook.

3. Save Fields

The last step is to save our fields values into the database. Guess what – we also have two action hooks for that – created_{Taxonomy} and edited_{Taxonomy}. Luckily we can connect the same callback function to both of them.

add_action( 'created_post_tag', 'misha_save_term_fields' );
add_action( 'edited_post_tag', 'misha_save_term_fields' );
 
function misha_save_term_fields( $term_id ) {
 
	update_term_meta(
		$term_id,
		'misha-text',
		sanitize_text_field( $_POST[ 'misha-text' ] )
	);
 
}

That’s it.

Not so difficult, but below I am going to show you even more simple way to create taxonomy term fields!

4. Simple Example

Sometimes it takes to long to create fields from scratch. So I decided to create a plugin which allows to simplify the process and to save a lot of time.

So, if you have my plugin installed on your website, just insert the below code to your current theme functions.php and a text field will appear on your add/edit term pages.

add_filter( 'simple_register_taxonomy_settings', 'misha_fields' );
 
function misha_fields( $fields ) {
 
	$fields[] = array(
 		'id'	=> 'mishatest',
 		'taxonomy' => array( 'post_tag' ),
 		'fields' => array(
			array(
				'id' => 'misha-text',
				'label' => 'Text Field',
				'type' => 'text',
			),
 		)
 	);
 
	return $fields;
 
}

Related posts

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 11 yrs of experience.

Need some custom developer help? Get in touch