How to add 'class' attribute into shortcode [audio]?

Question

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

[audio class="miniplayer" mp3="http://localhost/working_url.mp3"][/audio]

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?

Answer 1

WordPress allows least three options to manipulate the code to your needs.

1. 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;
   }
   

2. 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
   }
   

3. 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
   }
   

Answer 2

There are no options to add class as parameter in shortcode [audio]. You need to use filter wp_audio_shortcode_class to change default class wp-audio-shortcode or add additional class. Here example code to filter it ( add into functions.php theme files ).

add_filter( 'wp_audio_shortcode_class', 'wpse221201_audio_shortcode_class', 1, 1 );
function wpse221201_audio_shortcode_class( $class )
{
    $class .= ' my-class'; /* additional class */
    return $class;
}

For multiple shortcode [audio], you can use static $instance to loop ( if you need to use global variable, take a look @iantsch answer ):

add_filter( 'wp_audio_shortcode_class', 'wpse221201_audio_shortcode_class', 1, 1 );
function wpse221201_audio_shortcode_class( $class )
{
    static $instance = 0;
    $instance++;

    /* class name with increament number, change my-audio-class */
    $class = sprintf( '%s my-audio-class-%d', $class, $instance );
    return $class;
}

Here another option for next WordPress v4.5, we hook shortcode_atts_{$shortcode} and target specific shortcode.

add_filter( 'shortcode_atts_audio', 'wpse221201_shortcode_atts_audio', 1, 4 );
function wpse221201_shortcode_atts_audio( $out, $pairs, $atts, $shortcode )
{
    //static $instance = 0;
    //$instance++;

    /* target parameter 'mp3' with its file
       or add your own parameter ( $atts[whatever] ) and use it in  conditional statement
    */
    if ( isset( $out['mp3'] ) && isset( $out['class'] ) && 'source.mp3' == $out['mp3'] )
        $out['class'] = sprintf( '%s my-class', $out['class'] );//additional class

    return $out;
}

Answer 3

I fiddled around with all of the suggestions and would like to present what is the most elegant solution to me (but I'll leave the "answered" badge where it is), so future readers can benefit from it as well. This combines the use of filters (thanks to @Jevuska) and the suggestion of adding a shortcode (s/o @iantsch).

I've added a thumbaudio shortcode that will execute the audio shortcode with the modified class filter. That way, if a user types in the audio shortcode, it'll show the default player, but if (s)he typed in thumbaudio, it'll add miniplayer to the classes. The user has full control over which class is being applied where and when in the HTML file.

add_shortcode('thumbaudio', 'my_thumbaudio_shortcode');

function wp_audio_shortcode_thumbclass( $class ) {
    $class .= ' miniplayer';
    return $class;
}

function my_thumbaudio_shortcode( $attr ) {
    add_filter( 'wp_audio_shortcode_class', 'wp_audio_shortcode_thumbclass', 1, 1 );
    echo wp_audio_shortcode( $attr );
    remove_filter( 'wp_audio_shortcode_class', 'wp_audio_shortcode_thumbclass', 1 );
}