Code For The People: How Media Explorer Was Made
With the new Media Explorer plugin, you can now search for tweets and videos on Twitter and YouTube directly from the Add Media screen in WordPress. Media Explorer is a joint project by WordPress.com VIP and Code For The People (a VIP Featured Partner). In this post, CFTP’s John Blackbourn shares the technical and user experience decisions that were made while developing the plugin.
Embedding a YouTube video or a tweet into a WordPress post is powerfully easy.
There’s no HTML, no shortcode, no dialog box or Settings page – just the magic of oEmbed, baked right into WordPress core. But it’s so simple, and so unassuming, that many people just don’t know it’s there; and it’s not something they’d ever go looking for. With Media Explorer, we wanted to expose that magic within the user interface.
The end goal was to make retrieving externally-hosted content as easy as retrieving items from your own site’s Media Library, without even having to open another browser tab.
The initial plan concentrated purely on integration with Twitter with an architecture that would easily allow developers to add support for other web services like Flickr, YouTube, and Scribd.
Once the base of the plugin was completed with the Twitter search functionality, it was exciting to see YouTube support added in double-quick time, with no changes to the core plugin. It’s what WordPress development should be all about.
Going with the flow
To a developer, there’s a world of difference between accessing local and external media assets. But to the average WordPress user editing a post, it’s the exact same action. They want to find a ‘thing’ – be it an image, a video, a tweet – and display it within the flow of their post.
We felt it was essential for the Media Explorer UI to mimic the WordPress media manager as far as possible. And with the new admin interface redesign (codenamed MP6) coming together as we were writing the plugin, we knew we had to be ready to reflect its changes.
So we consciously re-used existing UI concepts, classes and components wherever possible. It gave us the best possible assurance of compatibility with the ‘old’ and ‘new’ admin stylings, and, we hoped, an interface which immediately felt familiar. Each service (e.g. “Insert Tweet”) sits in the left hand menu, with the relevant search options lined up as tabs across the top (e.g.”‘With Hashtag,” “By User,” etc).
As we began playing with sketch prototypes, we could see that the biggest UI problem was going to be how to deal with huge numbers of results, particularly where tweets were concerned. So for maximum efficiency, we implemented the ability for multiple selection and infinite scroll.
wp_enqueue_script calls in the
load method of your class.
No backbone required
All you need to do is create a ‘handler’ to process an array of user-entered search parameters, and return a valid response after performing a request to its corresponding web service’s API.
MEXP_Service base class provides the structure for your service to extend and build on. For example, your implementation of the tabs method should return an associative array of the tabs for the top of the media manager. Methods in the
MEXP_Service base class are defined as
abstract (must be implemented by your child class),
public (may be implemented by your child class), or
final (not to be implemented by your child class).