Title here
Summary here
Username Body Classes
Add the current user’s username and ID as CSS classes to the body tag. Create personalized experiences, target specific users with custom styling, or show user-specific elements on your site.
Use Cases
- Apply special styling for VIP clients or sponsors
- Show beta features only to specific test users
- Create personalized branding for enterprise clients
- Display user-specific welcome messages or offers
How It Works
- Enable the module in Switchboard
- Body classes are automatically added for logged-in users
- Write CSS targeting specific usernames or user IDs
- Those users see personalized styling
Where to Find It
Location: Works automatically site-wide. No configuration needed — just enable and start using the CSS classes.
Classes Added
For logged-in users, two classes are added to the <body> tag:
| Class Format | Example |
|---|---|
user-{username} | user-johnsmith |
user-id-{id} | user-id-42 |
Logged-out visitors don’t receive any user-specific classes.
CSS Examples
VIP User Styling
/* Special styling for VIP user "premium_client" */
body.user-premium_client .site-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
body.user-premium_client .vip-badge {
display: inline-block;
}Beta Tester Features
/* Hide beta features by default */
.beta-feature {
display: none;
}
/* Show only for specific beta testers */
body.user-beta_tester1 .beta-feature,
body.user-beta_tester2 .beta-feature,
body.user-beta_tester3 .beta-feature {
display: block;
}Enterprise Client Branding
/* Custom colors for Acme Corp's admin */
body.user-acme_admin {
--primary-color: #ff6b35;
--accent-color: #004e89;
}
body.user-acme_admin .site-logo {
content: url('/wp-content/uploads/acme-logo.png');
}User ID Targeting
/* Target user by ID (useful for numeric stability) */
body.user-id-1 .admin-tools {
display: block;
}
body.user-id-42 .special-offer {
display: block;
}Username vs User ID
Both classes are added for different use cases:
| Use Case | Recommended Class |
|---|---|
| Readable, self-documenting CSS | user-{username} |
| Stable targeting (usernames can change) | user-id-{id} |
| Quick one-off styling | Either works |
| Long-term production CSS | User ID is safer |
Works in Admin Too
The module adds user classes to the WordPress admin body tag, enabling:
- Custom admin dashboard styling per user
- Personalized admin experiences
- User-specific admin notices or tools
/* Admin-area styling for specific user */
body.wp-admin.user-johnsmith .dashboard-widget {
border: 2px solid gold;
}Practical Examples
Welcome Message
/* Generic welcome hidden by default */
.personal-welcome {
display: none;
}
/* Show for specific users */
body.user-sarah .personal-welcome.for-sarah {
display: block;
}
body.user-mike .personal-welcome.for-mike {
display: block;
}Sponsor Recognition
/* Special treatment for sponsors */
body.user-sponsor1 .comment-author,
body.user-sponsor2 .comment-author {
background: linear-gradient(to right, gold, orange);
-webkit-background-clip: text;
color: transparent;
}
body.user-sponsor1 .comment-author::after,
body.user-sponsor2 .comment-author::after {
content: " ★ Sponsor";
font-size: 0.8em;
}Development/Testing
/* Show debug info only for your account */
body.user-mydevaccount .debug-panel {
display: block;
position: fixed;
bottom: 0;
right: 0;
background: #1a1a2e;
color: #0f0;
padding: 10px;
font-family: monospace;
}Combining with Other Body Classes
Combine username classes with other body classes for precise targeting:
/* Show survey only to specific user on specific page */
body.user-johnsmith.page-id-42 .user-survey {
display: block;
}
/* VIP styling only on product pages */
body.user-vip_client.single-product .price {
color: gold;
font-weight: bold;
}Related Modules
- User Role Body Classes: Target users by role instead of username
- Custom Body Classes: Add static classes for general styling hooks
- Custom Frontend CSS: Write your CSS directly in Switchboard
FAQ
What if the username has special characters?
Usernames are sanitized for CSS class names. Characters like periods or underscores are preserved, but special characters are removed or converted.Is this visible in the page source?
Yes, the classes appear in the HTML body tag. Don’t use this for sensitive identification. Anyone viewing the source can see the username class.Why use user ID instead of username?
Usernames can be changed by users (if allowed) or admins. User IDs never change. For long-term CSS, targeting by ID is more reliable.Does this work for logged-out users?
No. Logged-out visitors don’t have a username or ID, so no user classes are added. The body tag remains unchanged for guests.Can I target multiple users at once?
Yes! List them in your CSS selector:body.user-john, body.user-jane, body.user-bob { ... }For user-specific CSS that needs to persist if usernames change, use the user-id-{id} class. The ID is stable even if the username is modified.
Privacy Note
The username appears in the page source HTML. Avoid using this for users who need anonymity, or ensure usernames don’t reveal personal information.
PRO
Upgrade to Pro
Get access to all 147 modules with a single license