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:

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>';

}

• I decided to add a field to post_tag taxonomy, so my action hook is post_tag_add_form_fields. But you can use any custom taxonomy name here.
• Taxonomy name as $taxonomy variable is available inside the function.
• Do not forget to wrap the field inside a div with form-field class.

Result:

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>';

}

• Function has two parameters: $term – which is a currently edited term object, $taxonomy – taxonomy name.
• We’re using get_term_meta() function here to get the term meta data.
• Do not forget to escape the data you get from the database.

And we have it:

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

• Plugin to Create Taxonomy Fields on the fly
• Creating Custom Option Pages
• Meta Boxes

Misha Rudrastyh

I develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me