Custom CSS In Admin Only For Certain Roles

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

Leave a Comment