Custom CSS In Admin Only For Certain Roles

The question:

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

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

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

Leave a Comment