CSS Styling Guide
CSS Styling Guide
The [user_role] shortcode allows you to display the current user's role anywhere in your WordPress frontend. By default, the output is wrapped in a HTML <span> tag with specific classes to allow for easy integration with your theme's design system.
Targeting the Output
To apply styles to the user role text, use the primary class .user-role-display.
/* Basic targeting */
.user-role-display {
font-weight: bold;
text-transform: capitalize;
}
Common Styling Patterns
1. Badge/Pill Style
If you want the user role to appear as a badge (common in profiles or headers), use the following pattern:
.user-role-display {
background-color: #f0f0f0;
color: #333;
padding: 2px 10px;
border-radius: 20px;
font-size: 0.9em;
display: inline-block;
border: 1px solid #ccc;
}
2. Theme Brand Integration
To ensure the shortcode output matches your theme's primary typography:
.user-role-display {
color: var(--wp--preset--color--primary); /* Using WP Theme JSON variables */
font-family: inherit;
letter-spacing: 0.05em;
}
Role-Specific Customization
The snippet includes dynamic class mapping. Each output includes a class specific to the role name (e.g., .role-administrator, .role-editor, .role-subscriber). This allows you to color-code users based on their permissions.
/* Styling specific roles */
.user-role-display.role-administrator {
color: #d63638; /* WordPress Admin Red */
}
.user-role-display.role-editor {
color: #0073aa; /* WordPress Blue */
}
.user-role-display.role-subscriber {
color: #646970; /* Gray */
}
Layout Alignment
Since shortcodes are often placed inside existing text blocks or menus, you may need to adjust the vertical alignment to ensure it sits flush with surrounding text:
/* Alignment within a navigation bar or header */
.site-header .user-role-display {
vertical-align: middle;
margin-left: 8px;
}
Usage in Block Editor (Gutenberg)
If you are using the Shortcode Block, you can also use the "Additional CSS Class(es)" field in the block settings sidebar. For example, adding my-custom-wrapper allows you to target the output like this:
.my-custom-wrapper .user-role-display {
font-variant: small-caps;
}