Additional Fields to the WordPress Media Uploader

In general, WordPress Media Uploader module has enogh data fields for identifying perfectly any of its elements, images, videos or whatever however, some times, you need not just identifying, for example an image, but to add some information about the exact url source, technical data about the place where it was taken, the people that appears in a photo, etc. In this cases, you need to add some more data fields to the WordPress Media Uploader.

How to add additional fields to the WordPress Media Uploader

In this example, we’re going to suppose that we want to add the name of the place where a photo was taken and, for example, the name of the client for who we are working thus, two additional fields because. By the way, if you was thinking in adding fields to keep the technical information of the photo, forget it. WordPress already stores most of these data (speed, aperture, focal length, date and time, etc.) and it saves them in a meta field so when you can simply get them via the WP function wp_get_attachment_metadata() without any other code (See the official documentation of wp_get_attachment_metadata for further information).

Adding a field to WordPress Media Uploader in two steps

In the first step, we display these two new fields in WP Media Uploader interface, to do this, we’re going to use a filter called attachment_fields_to_edit that allows us to add new fields after the common media data fields. This filter receives two parameters:

  • the array of the fields on the screen
  • the WP $post

So we have to add our new fields using the first parameter of the filter as new elements at the end of the array.

On the other hand, it’s important to take a look to the documentation about this filter (attachment_fields_to_edit, better to the code where it’s inserted, media.php ) because, the array of fields is not a simple list of the associated HTML for each field, but a collection of structured data. Each element of this array contains –at least– this information:

// example of an element of the fields array

$fields['field_name'] = array(
    'label' => 'This is the label',      // the label for field on the screen
    'input' => 'type of the field',      // text, number, html....
    'value' => $value,                   // The value for this field
    'helps' => 'Help text'               //  This is a text displayed next to field
)

So our function for inserting our two new fields will be more or less like this.

<?php
function adding_custom_media_fields ( $form_fields, $post ) {
    
    $form_fields['place_name'] = array(
        'label' => 'Place Name',
        'input' => 'text',
        'value' => get_post_meta( $post->ID, 'place_name', true ),
        'helps' => The name of place where the photo was taken',
    );
    $form_fields['client_name'] = array(
        'label' => 'Client Name',
        'input' => 'text',
        'value' => get_post_meta( $post->ID, 'client_name', true ),
        'helps' => 'The name of the client who commissioned the photography',
    );
    return $form_fields;

}
add_filter( 'attachment_fields_to_edit', 'adding_custom_media_fields', 10, 2 );
?>

Adding this function to the filter attachment_fields_to_edit we’ll display these two new fields on the screen as you can see in the next image.

Additional fields to the WordPress Media Uploader Example

Now, it’s time to save the values associated to these two fields so we are to use the filter attachment_fields_to_save that it’s executed each time that a WP multimedia element is saved to database and disc storage. In fact, at the end, we are doing the same that with fields created via metabox: a function for displaying, and a function for saving the data.

The second function –save– could be like this.

<?php
function saving_custom_media_fields ( $post, $attachment ) {

    if( isset( $attachment['place_name'] ) )
	update_post_meta( $post['ID'], 'place_name', $attachment['place_name'] );
    if( isset( $attachment['client_name'] ) )
	update_post_meta( $post['ID'], 'place_name', $attachment['client_name'] );
    return $post;

}
add_filter( 'attachment_fields_to_save', 'saving_custom_media_fields', 10, 2 );
?>

Now, we have already saved the values of these two new fields so, in any place of the theme, we can retrieve them via get_post_meta().

Have a nice WordPressing!

Leave a Comment

   Mandatory field
You can use these HTML tags inside the commment.
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>