How to add custom input field to Media panel?

WordPress allows you to upload many different file types and – of course – insert it to Post or Page. You already know that each file is uploaded via Media Panel and you definitely know how it looks like by default. But what if you need an extra information, beside all of available input fields?
Not so long time ago I had to find a solution for my friend who owns a website (WordPress) where users are able to download desktop backgrounds.
Consider the following situation:
- website owner wants to be able to upload background preview (smaller image file)
- whenever user clicks on image preview, download should be initiated
So I decided to add one extra input field to Media panel which was supposed to hold a path to zipped file download link. WordPress allows an access to almost each and every section of user interface ans so is with Media panel. I did it by using “attachment_fields_to_edit” and “‘attachment_fields_to_save” filters…

<?php
function attachment_url_extra( $form_fields, $post ) {
	// input field relates to attachments
        // my_field and _my_field is what you should replace with your own
	$post->post_type == 'attachment';
	$form_fields[ 'my_field' ] = array(
		'label' => __( 'MY FIELD' ),
		'input' => 'text',
		'value' => get_post_meta( $post->ID, '_my_field', true )
	);
	$form_fields[ 'my_field' ][ 'label' ] = __( 'MY FIELD' );
	$form_fields[ 'my_field' ][ 'input' ] = 'text';
	$form_fields[ 'my_field' ][ 'value' ] = get_post_meta( $post->ID, '_my_field', true );

	return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'attachment_url_extra', NULL, 2 );

function attachment_url_extra_save( $post, $attachment ) {

	if( isset( $attachment[ 'my_field' ] ) ) {
		if( trim( $attachment[ 'my_field'] ) == '' ) $post[ 'errors' ][ 'my_field' ][ 'errors' ][] = __( 'Error! Something went wrong.' );
		else update_post_meta( $post[ 'ID' ], '_my_field', $attachment[ 'my_field' ] );
	}
	return $post;

}

add_filter( 'attachment_fields_to_save', 'attachment_url_extra_save', NULL, 2 );
?>

The above code will actually make your Media panel look like this:

Where to paste the above code?

If your WP theme doesn’t contain “functions.php” file – create one and simply paste. Otherwise use existing “functions.php”. However we are just half way toward our goal because we gotta be able to pull inserted information out of database!

How to retrieve inserted information?

Hence the fact attachments are treated as posts, they have its own ID and certain meta data assigned by upload. Meta data is written to your WP database table named “wp_postmeta” so all we need to do is to find out our attachment ID and pull its meta data value which corresponds to a name “_my_field” – as can be seen in above example code.
Let’s say we are either in $wp_query loop (category template), single view (single.php) template file or a Page – it doesn’t really matter at this point.

<?php
// find out attachment ID of a post. We'll consider only the first attachment/image
$attFiles = get_children( 'post_type=attachment&post_mime_type=image&orderby=menu_order&order=ASC&post_parent=' . $post->ID );
// short way to access ID
$arrK = array_keys( $attFiles );
if( $arrK[ 0 ] ) {
	// ...
	$gpm_image_linkto = get_post_meta( $arrK[ 0 ], '_my_field', true );
        // ...
}
?>

Once you have required information, do whatever is necessary with it. That’s all folks, hopefully you’ve go the point!