Style the WordPress Media Player (Classic Editor Only)

This article describes how to style the audio player in the WordPress Classic Editor (it uses MediaElement.js). Note, if you upgrade to Gutenberg, these styles will no longer work!

The Gutenberg player uses the HTML audio element. If you want to style the  Gutenburg player, check out this article.

The Basic Shortcode

You can invoke the player in the Classic Editor by using a shortcode like this:

A nifty audio player appears like this:

Some CSS to Jazz It Up

Okay..  The functionality is fine, but it sticks out like a sore thumb on a white background as you can see here. I couldn’t find any parameters that were customizable, so I looked at the CSS using an inspector and added the following modifications to my theme’s CSS file:

/* WP 3.6 Native Audio Player styling*/

/* change the color of the background */
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
	background: url('') !important;
	background-color: #C8E1FA !important;
}

/* change the color of the lettering */
.mejs-currenttime,
.mejs-duration {
	color: black !important;
}

/* eliminate the yellow border around the play button during playback */
.mejs-controls .mejs-button button:focus {
outline: none !important;
}

This gets rid of the background image, changes the background color, and changes the color of the text. Note that the “important!” callouts are, well, important. The reason you need them is that the Media Player’s CSS file is loaded after your theme’s CSS file has loaded.

You can change the background color to whatever you want. Changing the background to light blue, the result is this:

Changing the Control Colors

Okay, better. But now, the controls are too light and barely show up while the progress bar is too dark. The control icons are in a sprite file located relative to your WordPress directory here:
/wp-includes/js/mediaelement/controls.svg

I copied it, modified it to make the icons darker, and saved it in my theme’s images folder as “mejs-controls-dark.svg”. Click here if you want to download it. (Don’t just modify the WordPress version of this file and save it back to the same location with same filename or else it will be blown away the next time you update). Note that a .png file would probably work fine too.

Next, I added some more CSS to call out the new icon file and lighten the progress bar:

/* use a sprite file with darker transport icons */
.mejs-controls .mejs-button button {
	background-image: url('your-images-directory/mejs-controls-dark.svg') !important;
}

/* change the color of the progress bar */
.mejs-controls .mejs-time-rail .mejs-time-total {
	background: #AAC7E3 !important;
}

/* change the color of the current time bar */
.mejs-controls .mejs-time-rail .mejs-time-current {
	background: #00a !important;
}

/* change the color of the file loading bar */
.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: #ccc !important;
}

And voila! The result is this:

Stopping the Default Styling From Appearing During Load

Okay, at this point, I thought I was done, but there is one really annoying thing going on.  It’s hard to tell on this particular page, but when you load the page, an older styling of the media player flashes on the screen for a second. (This even happens with the default styling!) It’s most noticeable if you have any Media Players above the fold, which are visible during page load. It’s pretty objectionable on a white background.

If you want to fix this, wrap each media player in a <div> tag with class=”audio-controls”. Then, hide this using CSS:

.audio-controls {
	display:none;
}

Next, add the following jQuery to your page to hide the controls while loading and unhide them after the page finishes loading. You simply add this to your page or post in Text mode (not Visual mode!).

<script type="text/javascript">// <![CDATA[
// show the media player after it loads
jQuery(document).ready(function() { 
jQuery('.audio-controls').show(); 
});
// ]]></script>

Note that I have  not implemented this code on this page because I wanted you to see the problem.

Time to Get Creative!

Okay, so now I’ve given you the tools to color almost all of the elements of the Media Player any way you like! Using these techniques and a bit more CSS, you can do things like alternate row striping like I’ve done here:

Want More?

But what if this isn’t enough customizability? Well, the MediaElement.js player has lots more options. Unfortunately, I couldn’t find a way to tweak these without hacking the WordPress core, which is a definite no-no.  If you want to access these, you could always just skip the WordPress shortcode and call the MediaElement Java Script directly.

Hope this was helpful to you!! Please leave a comment below if you have any comments or questions. – Brian

(p.s., I am using my own cheesy songs not out of vanity, but for legal reasons. I am guaranteed not to get sued for posting my own songs! All songs © 2000 Brian Shim)

Featured Image Photo by Scott Major on Unsplash

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com