1

I've changed the color of the Wordpress audio player using this CSS code.

/* change colours of audio player */

.mejs-controls,
.mejs-mediaelement,
.mejs-container {
    background: url('') !important;
    background-color: #1f7dcd !important;
}


/* change the color of the current time bar */
.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #dece66 !important;
}

Now, I'd like to change it to a different color depending on the role of the user whose post / comment it is attached to.

So if the mp3 file is posted by an editor, it uses a different color, and if it is posted by a subscriber, it has a different color.

Is that possible. If so, how would I do that?

1
  • 1
    you can add a CSS class to the comment with the filter comment_class
    – Kaperto
    Dec 3, 2019 at 20:24

1 Answer 1

1

The below will check the post creators role and based on that role allow you to set colour of the audio player.

Created in a plugin so to stop theme updates removing it on updating functions file when updating theme.

Not sure how to do this based on each comment of a person embedding a player as this would need to add tags to the html for each embedded player assigning different CSS styles to each tag.

<?php
    /**
    * Plugin Name: Change colour of the audio player
    * Plugin URI: http://www.web.com
    * Description: Adds colour to the audio player
    * Version: 1.0
    * Author: Name
    * Author URI: http://www.web.com

    */

 add_action( 'wp','my_special_action' ); function my_special_action() {

//Check if it is a post to run the code

  if (is_single())
  {

  //Get post ID
  $post_idz = get_the_ID();
  //Pull all field data of post
  $post_fields = get_post($post_idz);
  //Get authors ID 
  $author = $post_fields->post_author;
  //Get author roles
  $user_meta=get_userdata($author); 
  $user_roles=$user_meta->roles; 

//Check author has role

//Start ADD_ROLE_NAME
if (in_array("ADD_ROLE_NAME", $user_roles))
{
  ?>
    <style>
    /* change colours of audio player */

    .mejs-controls,
    .mejs-mediaelement,
    .mejs-container {
        background: url('') !important;
        background-color: #1f7dcd !important;
    }


    /* change the color of the current time bar */
    .mejs-controls .mejs-time-rail .mejs-time-current {
        background: #dece66 !important;
    }

    </style>

    <?php
} 
//End ADD_ROLE_NAME



} }
2
  • I tried this plugin and got this PHP notice: Notice: is_single was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false. Please see Debugging in WordPress for more information. (This message was added in version 3.1.0.) in /srv/users/sp-test-app-user/apps/testing-app/public/wp-includes/functions.php on line 4903
    – Jim Duggan
    Dec 4, 2019 at 17:57
  • @JimDuggan try now I left the action hook out
    – Sam
    Dec 4, 2019 at 18:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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