Latest Tech and Tips

How to Add Additional Fields to the WordPress Media Uploader

0

While engaged on a challenge the place we created a really cool gallery powered completely by WordPress attachments and a customized publish sort, we discovered a necessity to add extra fields to the WordPress media uploader. These extra fields allowed us to give every photographer credit score by including photographer title, and their URL on every picture web page. WordPress shops pictures as posts in the attachment publish sort, so including meta information is rather like including customized fields. Because the WordPress attachments doesn’t have a customized fields UI, now we have to add a customized fields to the media uploader so as to accumulate the meta information. In this text, we’ll present you the way to add extra fields to the WordPress Media Uploader.

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

For a challenge like this, we extremely advocate that you just create a site-specific plugin and add the following code. However, you may nonetheless add the codes in your theme’s capabilities.php file to make it work.

/**
 * Add Photographer Name and URL fields to media uploader
 *
 * @param $form_fields array, fields to embrace in attachment type
 * @param $publish object, attachment report in database
 * @return $form_fields, modified type fields
 */
 
perform be_attachment_field_credit( $form_fields, $publish ) {
	$form_fields['be-photographer-name'] = array(
		'label' => 'Photographer Name',
		'enter' => 'textual content',
		'worth' => get_post_meta( $post->ID, 'be_photographer_name', true ),
		'helps' => 'If offered, picture credit score will probably be displayed',
	);

	$form_fields['be-photographer-url'] = array(
		'label' => 'Photographer URL',
		'enter' => 'textual content',
		'worth' => 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 $publish array, the publish information for database
 * @param $attachment array, attachment fields from $_POST type
 * @return $publish array, modified publish information
 */

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

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

	return $publish;
}

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

The code above will add two textual content fields to the Media Uploader referred to as Photographer Name and Photographer URL. You can see that in the screenshot under:

Additional Fields in the Media Uploader

Explanation of the code: In the first perform, we’re merely utilizing an array to specify the subject’s label, enter sort, worth, and assist textual content. The second perform is checking to see if a price has been set for these fields. IF the worth is about, then the publish metadata is up to date.

If you need to show the fields in your attachments template, then merely paste the following codes inside the loop:

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

If you need to show the fields on your featured picture in your archive template or every other template, then merely use:

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

We hope that you just loved this text. For those that don’t understand how to create an attachment’s template, don’t fear. In the subsequent article, we’ll cowl how to create an attachment’s template in WordPress.

Hat Tip to Bill Erickson for exhibiting us how to do that.