Steve Taylor photo

Hijacking the WordPress Media Library overlay

I’ve just spent a bit of time wrangling with the issue of how to utilize the WordPress Media Library for custom fields. That is, if I have a custom post meta box (I’m using my custom fields plugin for this) into which I want people to put an image or a file, how can I get the popup overlay to work for me?

Thanks to some code in the excellent new book Professional WordPress Plugin Development, I got on the right track. However, this code only dealt with images, and it inserted the URL of the image into the custom field. I wanted more flexibility. I wanted the ID of the file attachment, plus the ability to deal with files of all types, not just images.

The result—so far—is this plugin:

File Select WordPress plugin

Install as per any other plugin, and use it by calling this function:

slt_fs_button( $name, $value [, $label, $preview_size, $removable ] );

$name is the name / ID for the field; $value is the current value; $label is a label for the button that’s pressed to open the overlay; $preview_size is the image size to be used for the preview; $removable signals whether to include a checkbox to remove the selected file. Check the code itself for more details.

The above function will output:

  • A button to open the Media Library
  • An optional checkbox for file removal
  • A hidden field to hold the actual file ID when selected
  • A preview of the selected image, or a link to the non-image file

I’ve included a few icons for common file types.

The plugin also disables the “From URL” tab when it opens the overlay. Because it relies on grabbing an image ID, I didn’t see a use for this aspect.

Obviously there’s a lot of scope for improvement, and there’ll certainly be a few bugs to iron out. But hopefully this’ll prove useful for plugin and theme developers.

People who are using my Custom Fields plugin, please note that I’ve not updated the version here on this site to use this plugin yet. This functionality will be included in the imminent new version (which will require File Select for file upload fields).

Please let me know your thoughts and experiences!

6 comments

  1. Gary avatar Gary

    Just wanted to say thank you Steve – I’ve integrated this into a custom post type edit page, and it works a treat – exactly what I was after!

    As well as a plugin (which a client might disable), is it possible to write as a straight class / include file that could be added into the theme files itself?

  2. Glad to hear it’s helping out! I reckon it should be straightforward to adapt it to include in a theme’s functions.php.

  3. Zack avatar Zack

    Looks great…unfortunately the download link is broken. Can you check the link? Thanks!

  4. Thanks Zack, I’ve fixed the link.

    FYI, I’m considering rolling this into the Custom Fields plugin, but in such a way that the functionality remains exposed for use by other plugins and themes.

  5. Thanks for this, saved me some hassle, came across this while i was looking for a way for the standard media uploader to return a ID on a non image.

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>