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;
}