4

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?

0

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
    }
    
  • Option 1 will do it for me - I'll definately have to check out filters further. Props to @Jevuska for providing part of the answer, I don't have the reputation to upvote yet. :) – Samuel LOL Hackson Mar 20 '16 at 14:11
  • if you look at the source code and see an $variable = apply_filters('filter_name', $variable[, $additional_attr_n]), you know that you can always change stuff here. – iantsch Mar 20 '16 at 14:17
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;
}
  • Thank you for your answer. I've added your snippet, and the function works, it adds ' my-class' to every player on the page. However, I still need to have two players where only one is given this ' my-class'. Is that possible somehow? – Samuel LOL Hackson Mar 20 '16 at 13:29
  • do you mean two class? – Jevuska Mar 20 '16 at 13:33
  • For example, yeah. Consider my scenario with player A and player B on the same page. A shall be given ' my-class', B shall be given ' other-class', and there should be something in the shortcode that tells the server which player should be given which class. How can I do this? Or, is this even possible? Maybe if I registered a new shortcode (say, my-audio) which calls the audio shortcode AND this filter? – Samuel LOL Hackson Mar 20 '16 at 13:35
1

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 );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.