Thursday, 29 May 2008

WordPress Media Plugin Tutorial 1: Custom media tabs

Categories

Tags

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.

Discussion

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

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

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

Join the Discussion