Title here
Summary here
User Role Body Classes
Automatically add the current user’s role as a CSS class to the body tag. Style your site differently for administrators, editors, subscribers, or guests using simple CSS selectors.
Use Cases
- Show admin-only tools or notices to administrators
- Display member-exclusive content styling for logged-in users
- Hide elements from guests while showing them to subscribers
- Create tiered visual experiences for different membership levels
How It Works
- Enable the module in Switchboard
- Body classes are automatically added based on the current user
- Write CSS targeting these classes
- Different users see different styling
Where to Find It
Location: Works automatically site-wide. No configuration needed — just enable and start using the CSS classes.
Classes Added
The module adds role-based classes to the <body> tag:
| User Type | Class Added |
|---|---|
| Administrator | role-administrator |
| Editor | role-editor |
| Author | role-author |
| Contributor | role-contributor |
| Subscriber | role-subscriber |
| Guest (logged out) | role-guest |
If a user has multiple roles, all roles are added as separate classes.
CSS Examples
Show Admin-Only Elements
/* Hide by default */
.admin-notice {
display: none;
}
/* Show only for administrators */
body.role-administrator .admin-notice {
display: block;
}Member vs Guest Styling
/* Guest sees teaser */
body.role-guest .premium-content {
filter: blur(5px);
pointer-events: none;
}
/* Members see full content */
body.role-subscriber .premium-content,
body.role-administrator .premium-content {
filter: none;
pointer-events: auto;
}Different Headers by Role
/* Default header */
.site-header {
background: #333;
}
/* Editor gets a distinct header */
body.role-editor .site-header {
background: #2c5282;
}
/* Admin gets a different header */
body.role-administrator .site-header {
background: #742a2a;
}Hide Purchase Buttons for Members
/* Hide "Subscribe" CTA for existing subscribers */
body.role-subscriber .subscribe-cta {
display: none;
}Works in Admin Too
The module also adds role classes to the WordPress admin body tag. This lets you:
- Style admin pages differently per role
- Show/hide admin elements with CSS
- Create custom admin experiences
/* Admin-area styling */
body.wp-admin.role-editor .some-admin-element {
display: none;
}Practical Examples
Membership Site Tiers
For a site with free and premium members:
/* Free tier (subscribers) */
body.role-subscriber .premium-badge {
display: none;
}
body.role-subscriber .upgrade-prompt {
display: block;
}
/* Premium tier (custom role: premium_member) */
body.role-premium_member .premium-badge {
display: inline-block;
}
body.role-premium_member .upgrade-prompt {
display: none;
}Editorial Preview Tools
Show draft indicators to editors:
/* Hidden by default */
.draft-indicator {
display: none;
}
/* Visible to editors and admins */
body.role-editor .draft-indicator,
body.role-administrator .draft-indicator {
display: inline-block;
background: #ffd700;
padding: 2px 8px;
font-size: 12px;
}Guest User Prompts
Encourage sign-ups for logged-out visitors:
/* Show login prompt to guests */
body.role-guest .login-prompt {
display: block;
background: #f0f4f8;
padding: 20px;
text-align: center;
}
/* Hide for logged-in users */
body:not(.role-guest) .login-prompt {
display: none;
}Custom Roles
The module works with any WordPress role, including custom roles from plugins:
| Plugin | Custom Role Example | Class |
|---|---|---|
| WooCommerce | Customer | role-customer |
| BuddyPress | Member | role-member |
| Custom plugin | VIP | role-vip |
Combining with Other Modules
This module pairs well with:
- Custom Body Classes: Add additional static classes
- Username Body Classes: Target specific users by username
- Custom Frontend CSS: Write your role-based CSS directly in Switchboard
FAQ
What if a user has multiple roles?
All roles are added as separate classes. A user who is both an editor and shop_manager would have bothrole-editor and role-shop_manager classes.Is this secure for hiding content?
CSS hiding is for visual purposes only. It doesn’t prevent access to content — the HTML is still in the page source. For true content protection, use proper membership or access control plugins.Does ‘role-guest’ apply to search bots?
Yes, search engine crawlers are not logged in, so they seerole-guest. Be careful not to hide important content from guests, as this could affect SEO.Can I target users without a specific role?
Use CSS:not() selectors. For example, body:not(.role-administrator) targets everyone except admins.Do custom roles from other plugins work?
Yes! Any role registered in WordPress gets its class. The format is alwaysrole-{role_slug}.Combine role classes with other body classes for precise targeting. For example, body.role-subscriber.single-post targets subscribers viewing single posts only.
Not for Security
CSS-based hiding is not a security feature. Users can inspect page source to see hidden content. Use proper access control for sensitive information.
PRO
Upgrade to Pro
Get access to all 147 modules with a single license