My First Plugin: “Shuffle”

I have been developing with WordPress for over a year now. It is hard to describe how much it has positively affected my development workflow. It’s easy to install, has easy-to-use APIs and great documentation, and its CMS capabilities are amazing. On top of that, it has a peer-less Plugin architecture which allows anyone to get under the hood and add functionality on top of WordPress core. The WordPress Plugin community is so vast and talented that when functionality is missing from WordPress itself, you are usually only one plugin away from tackling any problem you have.

  • I don’t want to write code that smushes my images, don’t need to: WP-Smush.it did it for me!
  • I don’t want to write a caching mechanism for my site, don’t need to: W3 Total Cache did it for me!
  • How do I write a sitemap and get myself up in the Google? No clue, so I’ll use Google XML Sitemaps!
  • I want to jam a social network into my website, oh heeeeyyyyyy BuddyPress!

But in the midst of this, I started building sites that have a lot of Images, Image Galleries, Video, Audio, Video Playlists, Audio Playlists, HTML5 video players, etc. WordPress is great at doing a few things with media:

1. Uploading multiple files at once
2. Hooks into the Upload actions (WP-Smush.it FTW!)
3. Attaching items to a post
4. Retrieving an item’s attachments (sorta)
5. Navigating through the Media Library… um, not really

Well, here’s what I NEEDED to do:

1. Detach images from a Post without DELETING THEM
2. Re-order my attachments by post (changing the order of a Playlist, etc)
3. Ordering my attachments by something other than date uploaded or title
4. Attach images to a video (another attachment) to use as a preview thumbnail
5. Attach album covers to audio files
6. Re-order a photo gallery at will
7. Do all of the above in an EASY way

WordPress doesn’t do any of this (if it does, it is hidden functionality that I don’t know about). So I decided to do something I, personally, have never done: I wrote a WordPress Plugin. Shuffle is the name of that plugin. Shuffle allows you to do a lot of thing with your Media that are not default WordPress behavior/functionality.

In the way that “tags” and “categories” are really just “taxonomies,” an “image” or a “video” is really just a Post type. Attachments live in the wp_posts table just like Posts, Pages, Custom Post Types, and other types of Attachments.

The wp_posts table has a bunch of fields. However, when it comes to attachments, there are 2 that we are really interested in: post_parent and menu_order. The act of attaching an image is really just setting the post_parent on the image to whatever number corresponds to the attaching Post type’s ID. If you attach 30 images to a post called “Hello World!” and Hello World’s ID in the database is 187, all 30 of those images will have post_parent set to 187. So if you want to “detach” the image, all you really need to do is set its post_parent to 0 (zero). Seems easy enough? Yet this is not an option in the Media Library.

If you create a Page and then create child Pages of that same Page, you will notice an attribute you can set by hand in the Edit panel: “order.” This corresponds to the menu_order field in the wp_posts table of the database. When you upload Attachments, menu_order is set to a default of 0 (zero) with no option to even change it by hand. Even if you could change it by hand, doing so for 50 images would be very very tedious. Wouldn’t it be great if you could see all 50 of those images for the attaching post and then re-order the images using a cool Drag and Drop UI that will set menu_order for you? You would think something that does at least half of this would be in WordPress by default, it is not.

I just uploaded a Video and want to feature it on a Page. I am going to use a slick new HTML5 Video Player and my Player wants me to specify a preview image / a “poster” image. I don’t necessarily have to do this, but I’d like to select the still show that shows on the screen before the user plays the video. I also want to set a thumbnail for the video so I can show a bunch of videos in a list or set up a cool HTML5 Video playlist. So how do I attach an Image to a Video in WordPress? You can’t.

This is where Shuffle comes in. Shuffle can do all of these things. Attach anything to anything. Detach without losing your files. Order your attachments by dragging and dropping like other services allow you to do. In your item’s list of Attachments, click on an item to see its Attachments! On so on and so on. Anyways, you need Shuffle! See it in action by downloading here:

http://wordpress.org/extend/plugins/shuffle/

12 thoughts on “My First Plugin: “Shuffle”

  1. Pingback: New Plugin, “Audio” | Scott Taylor

  2. Scott, We are using WordPress for CMS to manage our church web site. I have been looking for a random repeat button to place on our home page that will pick randomly 2 minutes audio’s when clicked. I have all the files in one folder and have a page setup for users to choose which messge thay want to hear, http://www.sovgrace.cc/daily-devotions/. Do you know if such a feature that will work with version 2.8.3?
    Thanks very much for your help

  3. Pingback: New Plugin, “Movies” | Scott Taylor

  4. Indeed a very cool plugin – just something that should have been standard in WP functionality itself! Glad you took care of adding that functionality :)

    Two suggestions from my side playing a little bit around with it:

    1) Add option “Shuffle attached media” as (hover) link under post title in “Attached to” column in Media Library view

    2) Add option “Detach” as (hover) link under post title in “Attached to” column (and remove separate “Detach” column to save some space) in Media Library view

    Would be cool to hear, what others say – or even cooler if you could add that functionality!

  5. Pingback: “Audio” plugin now supports Ogg Vorbis | Scott Taylor

  6. Pingback: New Plugin, “Rate” | Scott Taylor

  7. Hi! Excellent plug in! But as a n00b I don’t know how to install this piece:
    <blockquote cite="Use these functions in your Theme to get your re-ordered Media:

    My shuffling doesn’t work on the page. :(

  8. Pingback: Audio Redux + Updated Plugins | Scott Taylor

Holler

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s