Learn how to add CSS classes to the <body> tag in WordPress based on user roles to customize styling and functionality for different users, such as administrators, editors, and subscribers.
Say you want the frontend to look a little different for logged-in admins than it does for subscribers. A darker toolbar, a highlighted edit link, whatever. You don’t need a plugin for that. WordPress already tags the <body> element with a pile of classes, and the body_class filter lets you add your own. Here we’ll add one based on the current user’s role, so you can style against it in CSS.
Step 1: Add the User Role Class to the Body Tag
Drop this into your theme’s functions.php. It reads the logged-in user’s role and turns it into a class like role-administrator.
/**
* Add user role class to body tag.
*/
function wp_add_user_role_to_body( $classes ) {
global $current_user;
// Get current user's role.
$current_user_role = $current_user->roles;
$current_user_class = 'role-' . $current_user_role[0]; // Create class based on user role.
// If user is viewing the admin dashboard or customizer, don't add the class.
if( is_admin() || current_user_can( 'edit_dashboard' ) || is_customize_preview() ) {
return $classes . $current_user_class;
}
// Add the role class to the body tag.
$classes[] = $current_user_class;
return $classes;
}
// Add role class to body tag on frontend.
add_filter( 'body_class', 'wp_add_user_role_to_body' );
// Add role class to body tag in admin dashboard.
add_filter( 'admin_body_class', 'wp_add_user_role_to_body' );
Two filters are doing the work. body_class handles the frontend and hands you an array, so we push the class on with $classes[]. admin_body_class handles wp-admin and hands you a plain string, so that branch concatenates instead. The role itself comes off $current_user->roles, which is an array; we grab the first entry.
Step 2: Style Against the Role Class
Now target the class like any other selector.
/* Example CSS for administrator role */
.role-administrator .site-title {
color: #ff0000; /* Make the site title red for administrators */
}
/* Example CSS for subscriber role */
.role-subscriber .site-title {
color: #00ff00; /* Make the site title green for subscribers */
}
Step 3: Confirm It Worked
Log in as different roles, open your browser’s dev tools, and look at the <body> tag. You should see role-administrator, role-subscriber, and so on.
One thing to check first
The body_class filter only fires if your theme actually calls body_class() in its <body> tag inside header.php. Most standards-compliant themes do. If your class never shows up, that missing call is usually why, not the code above.