Hooks & Filters

Team Showcase exposes hooks and filters for developers who need to customize member output, modify queries, add custom fields, or integrate with other plugins.

Filters

ts_member_html

Filter the rendered HTML for an individual team member. This is the most powerful customization hook — it gives you complete control over the member output for any layout.

add_filter( 'ts_member_html', function( $html, $member, $layout ) {
    // Add a custom badge for the CEO
    $role = get_post_meta( $member->ID, '_ts_role', true );
    if ( $role === 'CEO' ) {
        $badge = '<span class="ts-badge ts-badge-ceo">Chief Executive</span>';
        $html  = str_replace( '</div><!-- .ts-member-card -->',
                              $badge . '</div><!-- .ts-member-card -->', $html );
    }
    return $html;
}, 10, 3 );

ts_member_fields

Add or modify the fields available for each team member. Custom fields added here will be saved as post meta and available in templates.

add_filter( 'ts_member_fields', function( $fields, $post_id ) {
    // Add a "Qualifications" field
    $fields['qualifications'] = array(
        'label'    => __( 'Qualifications', 'my-theme' ),
        'type'     => 'textarea',
        'meta_key' => '_ts_qualifications',
        'value'    => get_post_meta( $post_id, '_ts_qualifications', true ),
    );
    return $fields;
}, 10, 2 );

ts_avatar_html

Customize the avatar/photo HTML output for a member. Use this to integrate with external avatar services or add custom markup.

add_filter( 'ts_avatar_html', function( $avatar_html, $member ) {
    // Use Gravatar instead of the featured image
    $email = get_post_meta( $member->ID, '_ts_email', true );
    if ( $email ) {
        $hash = md5( strtolower( trim( $email ) ) );
        $avatar_html = '<img src="https://www.gravatar.com/avatar/' . $hash . '?s=300" '
                     . 'alt="' . esc_attr( $member->post_title ) . '" class="ts-avatar" />';
    }
    return $avatar_html;
}, 10, 2 );

ts_avatar_colors

Customize the color palette used for letter avatar backgrounds. Colors are assigned in rotation.

add_filter( 'ts_avatar_colors', function( $colors ) {
    // Use your brand colors
    return array(
        '#6366f1', // Indigo
        '#8b5cf6', // Violet
        '#ec4899', // Pink
        '#f59e0b', // Amber
        '#10b981', // Emerald
        '#3b82f6', // Blue
    );
} );

ts_members_query_args

Modify the WP_Query arguments used to retrieve team members. Use this to add custom query parameters, meta queries, or change the default ordering.

add_filter( 'ts_members_query_args', function( $args, $atts ) {
    // Only show members who have a photo
    $args['meta_query'][] = array(
        'key'     => '_thumbnail_id',
        'compare' => 'EXISTS',
    );
    return $args;
}, 10, 2 );

ts_social_links

Modify the social links output for a member. Add custom platforms or change the icon markup.

add_filter( 'ts_social_links', function( $links, $member ) {
    // Add a GitHub link from custom meta
    $github = get_post_meta( $member->ID, '_ts_github', true );
    if ( $github ) {
        $links['github'] = array(
            'url'   => esc_url( $github ),
            'label' => __( 'GitHub', 'my-theme' ),
            'icon'  => '<svg>...</svg>', // Your SVG icon
        );
    }
    return $links;
}, 10, 2 );

ts_schema_data

Modify the Schema.org Person data before it is output as JSON-LD. Add additional properties or remove unwanted ones.

add_filter( 'ts_schema_data', function( $schema, $member ) {
    // Add organization affiliation
    $schema['worksFor'] = array(
        '@type' => 'Organization',
        'name'  => get_bloginfo( 'name' ),
        'url'   => home_url(),
    );
    return $schema;
}, 10, 2 );

Actions

ts_before_team_output

Fires before the team showcase is rendered. Useful for adding headings, filter UI, or wrapper markup.

add_action( 'ts_before_team_output', function( $atts ) {
    echo '<div class="my-team-header">';
    echo '<h2>Our Team</h2>';
    if ( ! empty( $atts['department'] ) ) {
        $dept = get_term_by( 'slug', $atts['department'], 'ts_department' );
        if ( $dept ) echo '<p>' . esc_html( $dept->description ) . '</p>';
    }
    echo '</div>';
} );

ts_after_team_output

Fires after the team showcase is rendered. Useful for adding CTAs, closing wrappers, or additional content.

add_action( 'ts_after_team_output', function( $atts ) {
    echo '<p class="ts-cta">Interested in joining our team? ';
    echo '<a href="/careers/">View open positions</a></p>';
} );

ts_member_saved

Fires when a team member post is saved or updated from the admin. Useful for syncing data to external systems.

add_action( 'ts_member_saved', function( $post_id, $post ) {
    // Sync member data to an external directory
    $data = array(
        'name'  => $post->post_title,
        'role'  => get_post_meta( $post_id, '_ts_role', true ),
        'email' => get_post_meta( $post_id, '_ts_email', true ),
    );
    wp_remote_post( 'https://api.example.com/team/sync', array(
        'body' => wp_json_encode( $data ),
        'headers' => array( 'Content-Type' => 'application/json' ),
    ) );
}, 10, 2 );

Template Overrides

In addition to hooks, you can override any layout template by copying it to your theme directory. The plugin checks for templates in this order:

1. your-theme/team-showcase/layout-{layout}.php
2. your-theme/layout-{layout}.php
3. team-showcase/templates/layout-{layout}.php (plugin default)

Available template files:

• layout-grid.php — Grid layout template
• layout-list.php — List layout template
• layout-carousel.php — Carousel layout template
• layout-compact.php — Compact layout template
• member-card.php — Reusable member card partial
• single-ts_member.php — Single member page (if enabled)

Quick Reference Table