The Media Page Debacle
Spent hours fighting with the Media page today. Started with a third-party audio player plugin (bpmp MP3 Player) that had its own CSS and JavaScript — it looked decent but caused constant layout conflicts with the theme. The player container had fixed widths, shadow DOM internals, and inline styles that refused to cooperate with anything around it.
First attempt at fixing it was removing the plugin’s container class to free up the comment section width. That didn’t work — the comment box stayed narrow because the plugin’s CSS was baked into the page structure. So we deleted the entire Media page and recreated it from scratch, moving the comment over to the new page.
That still didn’t fix it. The real culprit was the bpmp plugin itself — its JavaScript and CSS were injecting styles that overrode everything else, no matter how many times we added !important overrides. After going in circles, we swapped it out for WordPress’s native audio block. Three simple <audio> elements, no plugin overhead.
Then the columns layout broke. WordPress core CSS was overriding the theme’s flex gap, so the audio players were crammed together with no spacing. Tried adding gap values in the stylesheet, then injecting them via wp_footer at priority 999 to beat the core styles. Nothing worked.
Final solution: scrapped the columns entirely. Put all three tracks stacked vertically inside one dark rounded box with proper spacing. Added a title, a subheading, and cleaned up the whole layout. Looks better than the original anyway.
Lessons learned: third-party block plugins bring their own CSS baggage that’s nearly impossible to override cleanly. WordPress core block styles load inline in the head and fight with theme stylesheets. Sometimes the simplest solution — native blocks, stacked layout — is the right one.
No comments yet.