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.
In WordPress, user roles define what a user is allowed to do within the site. These roles include Administrator, Editor, Author, Contributor, and Subscriber, each having different capabilities. If you’re looking to add specific styling based on the current user role, you can do so by dynamically adding a CSS class to the <body> tag based on the logged-in user’s role. In this tutorial, we’ll show you how to insert code into your functions.php file to accomplish this.
Step 1: Add User Role Class to the Body Tag
The first step is to create a function that checks the current user’s role and adds it as a class to the body tag. This allows you to apply role-specific CSS styles to different user roles in both the frontend and backend of your WordPress site.
Insert the following code into your theme’s functions.php file:
/**
* 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' );
This function works as follows:
- Retrieves the current user role: The
global $current_userobject is used to retrieve the current user’s role. The role is stored in an array, and we extract the first role using$current_user_role[0]. - Creates a custom CSS class: We create a class that corresponds to the user’s role. For example, if the user is an Administrator, the class added to the body tag would be
role-administrator. - Checks for backend or customizer views: If the user is viewing the backend (wp-admin) or the Customizer, the class is applied only within that context.
- Adds the class to the body tag: For frontend views, we add the class to the body using the
body_classfilter, and for admin views, we use theadmin_body_classfilter.
Step 2: Customize Your CSS for Each User Role
Once the function is in place, you can now add custom CSS styles for each user role. For example, if you want to style the dashboard for administrators differently from other users, you can target the role-administrator class like so:
/* 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 */
}
This allows you to create role-specific layouts, highlighting certain elements based on the user’s role, or adjusting styles based on the level of access a user has.
Step 3: Testing the Functionality
After adding the code to your functions.php file, log in with different user roles (Administrator, Subscriber, etc.) and inspect the body tag using your browser’s developer tools. You should see the corresponding class, such as role-administrator or role-subscriber, added to the body tag. You can then apply custom CSS styles to elements based on these classes.
Conclusion
By following this guide, you’ve now enabled the addition of a CSS class to the WordPress body tag based on the current user’s role. This is an effective way to apply role-specific styling, allowing you to further customize your WordPress site’s frontend and admin dashboard. It’s a simple yet powerful technique to enhance the user experience for different roles on your site.