Layouts
Team Showcase includes four built-in layouts. Each layout is fully responsive, supports configurable columns and fields, and can be customized with shortcode attributes or the Gutenberg block controls.
Grid Layout
The default layout. Displays team members as cards in a CSS Grid, with photo, name, role, and optional contact information.
Usage
[team_showcase layout="grid" columns="3" department="board"]Features
- Card-based design with consistent heights
- Configurable columns (1–6) — automatically adjusts for smaller screens
- Hover effect reveals additional info (bio, social links) if enabled
- Click action configurable: none, expand bio, link to single page, or mailto
- Letter avatar fallback when no photo is uploaded
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
columns | int | 3 | Number of columns (1–6) |
department | string | "" | Filter by department slug |
show_photo | string | "yes" | Show member photo |
show_role | string | "yes" | Show role/position |
show_email | string | "no" | Show email address |
show_phone | string | "no" | Show phone number |
show_bio | string | "no" | Show bio/description |
show_social | string | "no" | Show social media links |
click | string | "none" | Click behavior: none, expand, link, mailto |
limit | int | -1 | Max members to display (-1 for all) |
orderby | string | "menu_order" | Sort by: menu_order, title, date, rand |
order | string | "ASC" | Sort direction |
Examples
<!-- Board members in 4 columns with email visible -->
[team_showcase layout="grid" columns="4" department="board" show_email="yes"]
<!-- All members with bio and social links, clicking expands bio -->
[team_showcase layout="grid" show_bio="yes" show_social="yes" click="expand"]
<!-- Random 6 members for a homepage section -->
[team_showcase layout="grid" columns="3" limit="6" orderby="rand"]List Layout
Horizontal rows with the photo on the left and information on the right. Ideal for detailed team pages where you want to show more information per member.
Usage
[team_showcase layout="list" show_email="yes" show_phone="yes" show_bio="yes"]Features
- Full-width rows — one member per row
- Photo on the left, name/role/bio/contact on the right
- Social links displayed as icon row
- Clean, professional appearance suitable for corporate sites
- Responsive: stacks vertically on mobile
Additional Attributes
The list layout accepts all the same attributes as the grid layout (above), except columns which does not apply since each member takes a full row.
Examples
<!-- Full staff directory with all details -->
[team_showcase layout="list" show_email="yes" show_phone="yes" show_bio="yes" show_social="yes"]
<!-- Advisory board with bio, linking to individual pages -->
[team_showcase layout="list" department="advisory" show_bio="yes" click="link"]Carousel Layout
A swipeable slider that cycles through team members. Built with vanilla JavaScript — no jQuery or external library dependency.
Usage
[team_showcase layout="carousel" speed="5000" columns="3"]Features
- Auto-play with configurable speed (or manual-only)
- Touch/swipe support on mobile devices
- Previous/Next navigation arrows
- Dot indicators for current position
- Shows multiple cards at once (configurable via
columns) - Pauses on hover
- Vanilla JavaScript — no jQuery dependency
Carousel-Specific Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
speed | int | 5000 | Auto-play interval in milliseconds. Set to 0 to disable auto-play. |
columns | int | 3 | Number of cards visible at once |
arrows | string | "yes" | Show previous/next arrows |
dots | string | "yes" | Show dot indicators |
pause_on_hover | string | "yes" | Pause auto-play when hovering |
loop | string | "yes" | Loop back to start after last member |
All general attributes (department, show_photo, show_email, etc.) also apply.
Examples
<!-- Auto-playing carousel showing 4 at a time -->
[team_showcase layout="carousel" columns="4" speed="4000"]
<!-- Manual-only carousel with no auto-play -->
[team_showcase layout="carousel" speed="0" columns="1"]
<!-- Executive team carousel with social links -->
[team_showcase layout="carousel" department="executive" show_social="yes" speed="6000"]Compact Layout
Small circular avatars in a row with name and role shown on hover (tooltip). Perfect for sidebar widgets, footer sections, or anywhere space is limited.
Usage
[team_showcase layout="compact" limit="8"]Features
- Small circular avatar images (or letter avatars)
- Name and role shown in a tooltip on hover
- Wraps to multiple rows if needed
- Minimal space usage — ideal for widgets and sidebars
- Click action supported (link to member page, mailto, etc.)
Compact-Specific Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
size | string | "48" | Avatar diameter in pixels |
gap | string | "8" | Space between avatars in pixels |
Examples
<!-- Small team preview for homepage -->
[team_showcase layout="compact" limit="6" size="56"]
<!-- Board members in compact view, linking to individual pages -->
[team_showcase layout="compact" department="board" click="link"]
<!-- Larger avatars with more spacing -->
[team_showcase layout="compact" size="72" gap="12"]Showing Specific Members
Use the id attribute to display only specific team members by their post ID. This works with any layout.
[team_showcase id="42,55,61" layout="grid" columns="3"]To find a member's ID, hover over their name in the Team Members admin list — the ID is shown in the URL in the browser's status bar.
Department Tabs
Display all departments with tabbed navigation so visitors can switch between groups without page reloads:
[team_showcase layout="grid" columns="3" tabs="yes"]When tabs="yes" is set, the shortcode renders a tab bar with each department name. Clicking a tab shows only members from that department. The first tab is selected by default.
CSS Classes Reference
All output is scoped under .ts-team-wrap. Key classes for custom styling:
| Class | Description |
|---|---|
.ts-team-wrap | Outer wrapper for all team output |
.ts-grid | Grid container |
.ts-member-card | Individual member card (grid layout) |
.ts-member-row | Individual member row (list layout) |
.ts-carousel | Carousel container |
.ts-carousel-track | Sliding track inside carousel |
.ts-compact | Compact layout container |
.ts-avatar | Member photo or letter avatar |
.ts-letter-avatar | Generated letter avatar (no photo) |
.ts-member-name | Member name element |
.ts-member-role | Role/position text |
.ts-social-links | Social icons container |
.ts-dept-tabs | Department tab navigation bar |
Responsive Behavior
All layouts are fully responsive using CSS Grid and Flexbox:
- Grid: Columns reduce automatically on smaller screens (e.g., 3 columns becomes 2 on tablet, 1 on mobile)
- List: Photo and info stack vertically on mobile
- Carousel: Visible cards reduce on smaller screens; swipe gestures work on touch devices
- Compact: Avatars wrap to multiple rows naturally