Customizing The Color of Your Embedded Audio Player in WordPress

Helping your social justice blog work for you. Here’s a quick customization resource you can use whether you run a self-hosted website or are hosted through WordPress.com with the custom design option to customize your CSS code.

Currently in WordPress, if you include audio into your posts, a standard black and blue audio player appears, looking similar to the one in the screenshot below:

That player worked well enough for me, but over time I began to think that the standard black & blue was inconsistent with the aesthetics I had in mind.

I began to wonder if there was a way to change the look and feel of it. I did some digging and found a link with code and instructions and screenshots for changing the color of the audio player that I’d like to share with you.

If you visit the article you’ll find the tutorial I used to modify N.A.H.’s audio player’s color scheme from the original to one that more closely aligned with the colors I use often on the blog. Check it out:

It’s a slight change, but if you’ll notice, the color of the player is the same color as my blog’s header, and the color of the loading audio, as well as the volume, are the same shade of green that I use for my links, and throughout my blog’s design.

Now, any of the audio files I use, including my current and future podcasts, will take on this look. If I ever decide to change the color scheme down the road, I now know how to switch it up.

So there you have it. If you’re unfamiliar with the aspects of the code, be prepared to do a bit of experimenting, but with a bit of practice, you can make this thing look the way you want it to.

Ubuntu,

From Aspiring Humanitarian, Relando Thompkins-Jones, MSW, LLMSW

—————————————————————————————————————————

(N.A.H.) is a work of love and will continue to be. If you are able, consider supporting (N.A.H.) with a one-time donation or by becoming a monthly patron.

—————————————————————————————————————————