Custom CSS In Admin Only For Certain Roles

I’m looking to apply custom CSS in the admin only for a certain user role, “Contributor” to be exact.

Everything I try either seems to have no effect, or produces a 500 error.

What I’ve tried has in the main been loosely based around this:

add_action('admin_head', 'custom_admin_css');

function custom_admin_css( ){

global $user;

if (isset($user->roles)  && is_array( $user->roles ) ) {

    if( $user->roles[0] == 'administrator' ) {
        //Do something
    } elseif ( $user->roles[0] == 'editor' ) {
        //Do something
    } elseif ( $user->roles[0] == 'contributor') {
        echo '<style> CSS </style>';
    } else {
        //Do something
    }
}
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Upon request I will write an answer using a function from a suggested answer for the similar question: How to target with css, admin elements according to user role level?.

This function will output classes to the body element for all roles of the current user in the form role-XXXXX

function wpa66834_role_admin_body_class( $classes ) {
    global $current_user;
    foreach( $current_user->roles as $role )
        $classes .= ' role-' . $role;
    return trim( $classes );
}
add_filter( 'admin_body_class', 'wpa66834_role_admin_body_class' );

Now the roles can be targeted with css rules like:

#targetElement { 
    display: none; 
}
.role-editor #targetElement { 
    display: visible; 
}

These CSS rules don’t have to be output conditionally. They can be placed for example in any CSS file which is included via admin_enqueue_scripts action:

function wp245372_admin_enqueue_scripts() {
    wp_enqueue_style( 'my-admin-css', 'path/to/file.css', array(), 0.1);
}
add_action( 'admin_enqueue_scripts', 'wp245372_admin_enqueue_scripts' );

Method 2

Try this:

function wpse245372_admin_user_css() {
    $user = wp_get_current_user();
    if ( in_array( 'administrator', (array) $user->roles ) ) {
       // Your Admin Stuff
    } elseif ( in_array( 'editor', (array) $user->roles ) ) {
       // Your Editor Stuff
    } elseif ( in_array( 'contributor', (array) $user->roles ) ) {
       echo '<style> CSS </style>';
    } else {
       // What Everyone Else Gets
    }
}
add_action( 'admin_head', 'wpse245372_admin_user_css' );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0