How to add ‘class’ attribute into shortcode [audio]?
IT Nursery
May 9, 2022
0
I would like to style two MediaElement players on the same page differently, and figured out the easier way to do this (compared to adding a completely new shortcode and enqueueing a new stylesheet, which I couldn’t get working either) is to assign a different class to the audio shortcode of player A.
The WordPress code reference
mentions adding a class attribute to the shortcode, but I can’t get it to work. For instance, writing
does give me a working player, but I can’t see “miniplayer” assigned to it anywhere in my Firefox console. So how do I assign a class to my shortcode properly?
3 Answers 3
WordPress allows least three options to manipulate the code to your needs.
Use a global variable that you increment with @Jevuska ‘s answer.
global $my_audio_player_count;
$my_audio_player_count = 0;
add_filter( 'wp_audio_shortcode_class', 'wpse221201_audio_shortcode_class', 1, 1 );
function wpse221201_audio_shortcode_class( $class ) {
global $my_audio_player_count;
$class .= ' my-audio-player-'.$my_audio_player_count++;
return $class;
}
Remove the built-in shortcode and add your own
remove_shortcode('audio');
add_shortcode('audio', 'my_audio_shortcode');
function my_audio_shortcode($args) {
//TODO: Insert your own version of the shortcode
}
Use the wp_audio_shortcode_override filter hook to override
add_filter('wp_audio_shortcode_override', 'my_audio_shortcode');
function my_audio_shortcode($args) {
//TODO: Insert your own version of the shortcode
}