Styling and Layout

Styling and Layout

The [user_role] shortcode outputs the current user's role as a plain string. Because the output is unformatted by default, you have full control over how it integrates with your site's design using CSS.

Targeting the Output

To style the user role, it is recommended to wrap the shortcode in an HTML container with a custom class within your WordPress editor (Gutenberg, Classic Editor, or Page Builders).

<span class="custom-user-role">
    [user_role]
</span>

CSS Styling Examples

You can add the following styles to your theme’s style.css file or the Additional CSS section in the WordPress Customizer.

1. Basic Text Formatting

Enhance the visibility of the role by adjusting the font weight and transform:

.custom-user-role {
    font-weight: bold;
    text-transform: capitalize;
    color: #2c3e50;
}

2. Badge/Pill Layout

To display the user role as a styled badge (common for member directories or profile headers), apply padding and a background color:

.custom-user-role {
    display: inline-block;
    padding: 2px 10px;
    background-color: #0073aa;
    color: #ffffff;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
}

3. Handling Empty States

If a visitor is not logged in, the shortcode may return an empty string. To prevent empty HTML containers from affecting your layout (such as unwanted borders or margins), use the :empty pseudo-class:

/* Hide the wrapper entirely if no role is returned */
.custom-user-role:empty {
    display: none;
}

Layout Integration Tips

• Inline Placement: Use the <span> tag to place the user role directly inside a sentence (e.g., "Logged in as: [user_role]").
• Block Placement: Use a <div> tag if you want the user role to appear on its own line, such as under a profile picture or at the top of a sidebar.
• Alignment: If placed inside a header or navigation bar, use vertical-align: middle; to ensure the text aligns correctly with adjacent icons or menu items.

Shortcode within PHP Templates

If you are styling the layout directly within your theme's template files (e.g., header.php), use do_shortcode() and wrap it in a class-driven element:

<div class="site-header-role">
    <?php echo do_shortcode( '[user_role]' ); ?>
</div>