C:\ Home » Blog » Code » Customizing WordPress MediaElement.js Audio Shortcode Again

Customizing WordPress MediaElement.js Audio Shortcode Again

Back in 2015 I customized the WordPress MediaElement.js audio shortcode, and some time since then it broke. I tried fixing it. I dug around and did things but... nothing seemed to work. So I finally cleared out the old code and started fresh.

This is what the vanilla version looked like:


This is what my 2015 version looked like:


And now here's the 2018 version:

The New MediaElement Element!

The process was a lot more time-consuming last time - mainly because I'd never done it before, but also because documentation for MediaElement.js in regards to WP was pretty much non-existent. Unfortunately this is still the case, but I did a search and found this new and super helpful post, with a new stylesheet included. I didn't want that particular style, but I used it as reference and experimented with other colors and dimensions, trying to make it somewhat like my own one, and you can see the result above.

I'm pretty happy with the result! Thoughts?

It's a bit buffer now. A bit thicker, and simpler (no gradients... yet), but I was happy to see the loading pattern was a part of the original player, so that part didn't need redoing. Further mods may happen when time allows, but for now: the player's no longer broken! Hurrah.

If you want to make your own modification the link above's a fantastic reference. Super easy to understand, use, and modify. Not all elements are included in the stylesheet, but you can copy in any additional ones from the official one (just check your page source on a player page - there should be a link to the official stylesheet there).

And if you don't: this is all you really need. The barebones; essentials. Much easier than the one I used before.

Hopefully it'll work longer than the last one, too.

Most preferably forever.


Keep track of the discussion via rss? Read about comment etiquette? Or type in something below!
This was pretty damn interesting. And yet, nobody's spoken! Be the first!

The Comment Form

Your email address will not be published. Required fields are marked *

Your email is saved only to approve your future comments automatically (assuming you really are a human). ;) It's not visible or shared with anyone. You can read about how we handle your info here.

Question   Razz  Sad   Smile  Redface  Biggrin  Surprised  Eek   Confused   Cool  Mad   Twisted  Rolleyes   Wink  Idea  Neutral

Privacy   Copyright   Sitemap   Statistics   RSS Feed   Valid XHTML   Valid CSS   Standards

© 2019
Keeping the world since 2004.