Justin Tadlock

WordPress theme MediaElement.js project

Earlier design of a video from a new theme
Earlier design of a video from a new theme

Over the past couple of weeks, I’ve been working on a media-heavy WordPress theme that takes full advantage of WordPress 3.6’s new audio and video functionality. If you’re not up to speed on what’s new, here’s a quick rundown of the features included in the latest WordPress release.

  • [audio] shortcode.
  • [video] shortcode.
  • Audio and video metadata thanks to the getID3 library.
  • MediaElement.js audio and video player.
  • Some new and cool functions.

These are all tools for self-hosted media. While I don’t expect most users to host their own audio and video (and most shouldn’t for various reasons), I thought it’d be fun to experiment with these new features.

Theme MediaElement

Because I wanted to custom style the new media player in WordPress, I needed a way to easily do this. WordPress was making it hard by:

  • Loading stylesheets in the footer.
  • Having extremely specific CSS selectors.
  • Using !important in several places.

From a theme design perspective, it was a nightmare to work with. Therefore, I just disabled WordPress’ styles and created my own base stylesheet to work from. The trick was keeping enough of the original styles while not being so overbearing that it made it hard to overwrite with custom style rules.

I decided to just build from the original stylesheet included with WordPress. The wheel was already invented, so I just used it. There are still many stylistic style rules (e.g., font sizes, background colors, text colors, etc.) in the project rather than a complete reset, which may or may not be a good thing for your theme.

Take it for a test run

If you’re a theme developer and are interested in writing custom styles for the MediaElement.js player, you might find this useful. Even if it’s not exactly what you’re looking for, feel free to fork the project on GitHub and do your own thing. I’ve tried to organize the file and leave enough comments to help you figure things out more easily.

The project is hosted on GitHub. Feedback is always welcome. Please enjoy!