WPBeginner» Blog» Tutorials» How to Add Additional Fields to the WordPress Media Uploader

How to Add Additional Fields to the WordPress Media Uploader

Last updated on February 8th, 2012 by Editorial Staff

Special WordPress Hosting offer for WPBeginner Readers

How to Add Additional Fields to the WordPress Media Uploader

While working on a project where we created a very cool gallery powered totally by WordPress attachments and a custom post type, we found a need to add additional fields to the WordPress media uploader. These additional fields allowed us to give each photographer credit by adding photographer name, and their URL on each image page. WordPress stores images as posts in the attachment post type, so adding meta data is just like adding custom fields. Because the WordPress attachments does not have a custom fields UI, we have to add a custom fields to the media uploader in order to collect the meta data. In this article, we will show you how to add additional fields to the WordPress Media Uploader.

We will be using the following filters to make the change: attachment_fields_to_edit and attachment_fields_to_save

For a project like this, we highly recommend that you create a site-specific plugin and add the following code. However, you can still add the codes in your theme’s functions.php file to make it work.

/**
 * Add Photographer Name and URL fields to media uploader
 *
 * @param $form_fields array, fields to include in attachment form
 * @param $post object, attachment record in database
 * @return $form_fields, modified form fields
 */
 
function be_attachment_field_credit( $form_fields, $post ) {
	$form_fields['be-photographer-name'] = array(
		'label' => 'Photographer Name',
		'input' => 'text',
		'value' => get_post_meta( $post->ID, 'be_photographer_name', true ),
		'helps' => 'If provided, photo credit will be displayed',
	);

	$form_fields['be-photographer-url'] = array(
		'label' => 'Photographer URL',
		'input' => 'text',
		'value' => get_post_meta( $post->ID, 'be_photographer_url', true ),
		'helps' => 'Add Photographer URL',
	);

	return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );

/**
 * Save values of Photographer Name and URL in media uploader
 *
 * @param $post array, the post data for database
 * @param $attachment array, attachment fields from $_POST form
 * @return $post array, modified post data
 */

function be_attachment_field_credit_save( $post, $attachment ) {
	if( isset( $attachment['be-photographer-name'] ) )
		update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name'] );

	if( isset( $attachment['be-photographer-url'] ) )
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url'] ) );

	return $post;
}

add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );
?>

The code above will add two text fields to the Media Uploader called Photographer Name and Photographer URL. You can see that in the screenshot below:

Additional Fields in the Media Uploader

Explanation of the code: In the first function, we are simply using an array to specify the field’s label, input type, value, and help text. The second function is checking to see if a value has been set for those fields. IF the value is set, then the post metadata is updated.

If you want to display the fields in your attachments template, then simply paste the following codes inside the loop:

echo get_post_meta($post->ID, 'be_photographer_url', true);

If you want to display the fields for your featured image in your archive template or any other template, then simply use:

echo get_post_meta(get_post_thumbnail_id(), 'be_photographer_url', true);

We hope that you enjoyed this article. For those who don’t know how to create an attachment’s template, don’t worry. In the next article, we will cover how to create an attachment’s template in WordPress.

Hat Tip to Bill Erickson for showing us how to do this.