Wordpress: Adding custom fields to taxonomies

How do I add a custom field to a taxonomy?

I would like to add an image path field to upload images for a single taxonomy entry. This image should be displayed in the frontend at the end. After some reading I did not find a tutorial that was not too old or completly right. Many custom functions and too many outdated Wordpress hooks and functions to achieve the mentioned goal. Finally I  got the custom field working and I would like to explain the solution here.

Adding a taxonomy field

So lets start with two actions which add fields to our taxonomy forms. $taxonomyName is the name of the taxonomy you will alter. Wordpress default taxonomies are called category and tag. But you can also use these functions with your custom taxonomy, using its name. The add_form_fields hook version adds the form fields when we are adding a new taxonomy term. The edit_form_fields  hook adds the form fields when we are editing a taxonomy term. [1][2]

$taxonomyName = " category"; // [category, tag, your_custom_taxonomy_name]

add_action( $taxonomyName . '_add_form_fields', 'add_custom_tax_field_oncreate' ) );

add_action( $taxonomyName . '_edit_form_fields', 'add_custom_tax_field_onedit' ) );

A sample function for adding a new field can look like the following. We have to use two sepereate functions here because Wordpress renders the view to add a term with a <div> structure and to edit a term with a <table> structure. We also add some magic to the _onedit function to receive the saved values from the database. To learn how to store your new values into the database you have to continue with the next section.

/** 

 * Adds a imagepath field to our taxonomy in create mode

 * 

 * @author Hendrik Schuster <contact@deviantdev.com>

 * @param int $term the concrete term

 */

function add_tax_field_oncreate( $term ){

	

	echo "<div class='form-field term-image-wrap'>";

	echo "<label for='customfield'>Custom Label</label>";

	echo "<input id='customfield' value='' size='40' type='text' name='customfield'/>";

	echo "<p class="description">Custom description.</p>";

	echo "<div>";

}



/** 

 * Adds a custom field to our taxonomy in edit mode

 * Gets the current value from the database and renders the output

 * 

 * @since 1.0

 * @author Hendrik Schuster <contact@deviantdev.com>

 * @param int $term the concrete term

 */

function add_tax_field_onedit( $term ){

	$termID = $term->term_id;

	$termMeta = get_option( "$taxonomyName_$termID" );    

	$customfield= $termMeta['customfield'];

	

	echo "<tr class='form-field form-required term-name-wrap'>";

	echo "<th scope='row'><label for='custom-field'>Custom Label</label></th>";

	echo "<td><input id='customfield' value='$customfield' size='40' type='text' name='custom-field'/>";

	echo "<p class="description">Custom description.</p>";

	echo "</tr>";

}

 Saving field values to the database

Again we need two separate action hooks for saving our fields into the database. One action for the add screen and the other for the edit screen. [2]

add_action( 'create_$taxonomyName', 'save_custom_tax_field' );

add_action( 'edited_$taxonomyName', 'save_custom_tax_field' );

But we just need a single function for storing the sent values into the database using the Wordpress Options API. We are creating a new options entry for each term using the termID. Further we are going to save the options for each term as an array. So we can store multiple field values in one entry, if we are expanding the taxonomy meta data.

/** 

 * Does the saving for our extra image property field

 * Takes the options array from the database and alters the customfield value

 * 

 * @since 1.0

 * @author Hendrik Schuster <contact@deviantdev.com>

 * @param int $termID ID of the term we are saving 

 */

function save_custom_tax_field( $termID ){



	if ( isset( $_POST['customfield'] ) ) {

		

		// get options from database - if not a array create a new one

		$termMeta = get_option( "$taxonomyName_$termID" );

		if ( !is_array( $termMeta ))

			$termMeta = array();

		

		// get value and save it into the database - maybe you have to sanitize your values (urls, etc...)

		$termMeta['customfield'] = isset( $_POST['customfield'] ) ? $_POST['customfield'] : '';

		update_option( "$taxonomyName_$termID", $termMeta );

	}

}

Ressources

[1] http://wordpress.stackexchange.com/questions/689/adding-fields-to-the-category-tag-and-custom-taxonomy-edit-screen-in-the-wordpr

[2] http://php.quicoto.com/add-metadata-categories-wordpress/