Getting Started

Team Showcase lets you display team members, board members, or staff with professional layouts. Admin-only management with four built-in display layouts, department filtering, and Schema.org markup for SEO.

Installation

  1. Download team-showcase.zip from WordPress.org or your account dashboard.
  2. Go to Plugins → Add New → Upload Plugin in your WordPress admin.
  3. Upload the ZIP and click Install Now.
  4. Click Activate.

What Happens on Activation

On activation, the plugin:

  • Registers the ts_member custom post type
  • Creates the ts_department taxonomy for grouping members
  • Adds the "Team Members" menu item in the WordPress admin sidebar
  • Creates the settings page under Settings → Team Showcase
  • Sets default options for layout, columns, and field visibility

Adding Team Members

  1. Go to Team Members → Add New in the WordPress admin.
  2. Enter the member's name as the title.
  3. Optionally add a bio/description in the main editor.
  4. In the Member Details meta box, fill in:
    • Role / Position — e.g., "CEO", "Board Member", "Lead Developer"
    • Email — displayed as a mailto link (optional)
    • Phone — displayed as a tel link (optional)
    • Social Links — LinkedIn, Twitter/X, Facebook, Instagram, or a custom URL
  5. Set a Featured Image as the member's photo. If no photo is set, the plugin generates a letter avatar (colored circle with the member's initials).
  6. Assign one or more Departments (e.g., "Board", "Staff", "Advisory").
  7. Set the Order attribute (under Page Attributes) to control display order, or use drag-and-drop sorting in the member list.
  8. Click Publish.

Member Fields Reference

Field Storage Required Description
Namepost_titleYesThe member's display name
Bio / Descriptionpost_contentNoBiographical text, shown in expanded views
Photopost_thumbnailNoProfile photo; letter avatar used as fallback
Role / Position_ts_role metaNoJob title or position
Email_ts_email metaNoContact email address
Phone_ts_phone metaNoContact phone number
Social Links_ts_social metaNoArray of social profile URLs
Departmentts_department taxonomyNoGroup/department assignment
Display Ordermenu_orderNoSort order (lower numbers display first)

Creating Departments

Departments let you group and filter team members. Common examples: Board, Executive Team, Staff, Advisory, Volunteers.

  1. Go to Team Members → Departments.
  2. Add a new department with a name, slug, and optional description.
  3. When editing a team member, assign them to one or more departments.
  4. Use the department attribute in shortcodes to display only specific groups.

Displaying Team Members

Use the [team_showcase] shortcode or the Team Grid Gutenberg block to display members on any page.

Basic Usage

[team_showcase]

This displays all published team members using the default layout and column settings.

Common Examples

<!-- Grid layout, 3 columns, only Board members -->
[team_showcase layout="grid" columns="3" department="board"]

<!-- List layout showing email and social links -->
[team_showcase layout="list" show_email="yes" show_social="yes"]

<!-- Carousel with auto-play -->
[team_showcase layout="carousel" speed="5000"]

<!-- Compact avatars, max 8 members -->
[team_showcase layout="compact" limit="8"]

See the Layouts Reference for detailed examples of all four layouts.

Settings Overview

Navigate to Settings → Team Showcase to configure defaults:

Setting Description Default
Default layoutLayout used when no layout attribute is specifiedGrid
Default columnsNumber of columns in grid/compact layouts3
Single member pagesEnable/disable individual member pages with full bioDisabled
Default visible fieldsWhich fields to show by default (photo, email, phone, bio, social)Photo, Role
Avatar fallback colorsColor palette for generated letter avatarsPreset palette
Schema.org markupOutput Person schema for SEOEnabled
Custom CSSAdditional CSS loaded on pages with team outputEmpty
Image sizeWordPress image size for member photosMedium

Gutenberg Block

The Team Grid block (team-showcase/team-grid) provides a visual editor interface with:

  • Layout selector (Grid, List, Carousel, Compact)
  • Department filter dropdown
  • Column count slider
  • Field visibility toggles
  • Style controls for colors and spacing
  • Live preview in the editor

Drag-and-Drop Sorting

Reorder team members without editing each one individually:

  1. Go to Team Members in the admin.
  2. Drag members up or down to change their display order.
  3. The order is saved automatically.

Members are displayed in menu_order order by default. You can override this with the orderby shortcode attribute.

Letter Avatar Fallback

When a team member has no photo, the plugin generates a colored circle with the member's initials. This is pure CSS — no external service is called.

  • Colors rotate through a configurable palette
  • Customize colors in Settings → Team Showcase or via the ts_avatar_colors filter
  • Customize the avatar HTML with the ts_avatar_html filter

Schema.org Markup

When enabled (on by default), the plugin outputs Person schema in JSON-LD format for each team member. This includes:

  • name — member's name
  • jobTitle — role/position
  • email — if provided
  • image — photo URL
  • url — single member page URL (if enabled)

Validate your markup with the Google Rich Results Test.

Next Steps