WordPress Media Plugin Tutorial 1: Custom media tabs

This is the first tutorial in a series covering the media hooks available in the WordPress 2.5 API. This article shows how to add a custom media tab to WordPress's built in media library. We'll be using the WordPress API to do this, so no code hacks are required. All examples are based on the SwfObj plugin I developed. Feel free to download SwfObj as a reference.

WordPress hooks

WordPress has conveniently added hooks to its core code, allowing developers the ability to modify content and add functionality without having to hack WordPress source files. These include filters and actions. For these tutorials we will be using both the 'add_filter' and 'add_action' functions.

If you are unfamiliar with WordPress's hooks, I'd recommend reading their API documentation first.

Creating a media tab

When viewing media in WordPress's media library, there are tabs for images, video, and audio. I am going to add a "Flash" tab to the list. You can add whatever media tab you require.

\

Adding file type categories is actually quite easy to do. To add a tab, you first need to know the MIME type of your category. Flash files (.swf files) use the 'application/x-shockwave-flash' MIME type. If you don't happen to know the MIME type for your files, upload one using the WordPress media button. Once it is uploaded, WordPress displays its type right under the file name.

The WordPress hook to add a category tab to your library is the 'post_mime_types' filter. WordPress uses an array called $post_mime_types to store all of the MIME types it lists in the Media Library. To add a new media type, you simply need to add it to this array. The following code adds a "Flash" media category that lists all .swf files in the library.

function modify_post_mime_types($post_mime_types) {
    $post_mime_types['application/x-shockwave-flash'] = array('Flash', 'Manage Flash', 'Flash (%s)');
    return $post_mime_types;
}

add_filter('post_mime_types', 'modify_post_mime_types');

The array that is stored in the new $post_mime_types entry holds the following values

  1. The title of the media type ('Flash').
  2. The title to display when viewing this category in the Media Library ('Manage Flash').
  3. And the title to put on the tab in the Media Library ('Flash (%s)'). The %s is replaced by the number of items in this category.

Extras

WordPress allows you to add both general and specific MIME types. You can add an 'application' type which will show all objects whose MIME type starts with 'application/'. To only show a specific file type, use the full MIME type, such as 'application/x-shockwave-flash'. Make sure if you are declaring something specific, that you use the full MIME type, not just the value after the '/'.

Here are a few file types you may be interested in.

  • PNG: image/png
  • PDF: application/pdf
  • ZIP: application/zip

You can also remove media types from the list if you'd like. To do this, use the unset function. Here is an example that removes the 'audio' category from the Media Library.

function modify_post_mime_types($post_mime_types) {
    unset ($post_mime_types['audio']);
    return $post_mime_types;
}

And there you have it. Total control over the media types listed in WordPress using the WordPress API. In future posts we'll discuss how to customize uploading, editing and embedding media into your posts. Please post any comments or questions you have.

If anyone has a better name for the "WordPress 2.5 Media API tutorial series" please let me know. That's a monster to type out.

This entry was posted in Tutorials, WordPress and tagged , , , , , , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://whois.domaintools.com/milasha.com/ agelize

    Подскажите шооблончег под WordPress 2.6.2, чтобы был похож на ваш orangesplotch.com.

    Заранее благодарю)

  • http://orangeSPLoTCH.com mattc

    Я говорю очень маленького русского. Вы могли перевести?

  • http://jason.newlin.me Jason Newlin

    Wow, thanks for the info. It’s really simple after you explain it all.

    I made a nice little PDF section, very handy. Thanks again.

    • http://orangeSPLoTCH.com mattc

      Yep, WordPress made it really easy to do. They just didn’t document it at all.

  • Kniginya

    спасибо за ваши посты, поднимают настроение

    • http://orangeSPLoTCH.com mattc

      Пожалуйста.

  • Jim Camomile

    Looks like what I need, except I have no idea where to start with the modify_post_mime_types code. Without a file name as to where to put this easy fix, it really is not all that easy.

  • http://axcoto.com kureikain

    A great post, why did’t you add it to codex of wordpress ?
    Wordpress seems hard all, but lacking of document about it
    I wrote one about how to add new tab on media upload page here
    http://axcoto.com/blog/article/307