# Team Members Grid Shortcode

> Adds a [team] shortcode that shows team members with photo, name and job title in a responsive grid, optionally filtered by department.

- Type: PHP
- Runs: Run everywhere
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: team, shortcode, grid
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/team-grid-shortcode/

## Code

```php
add_shortcode( 'team', function ( $atts ) {
    $atts = shortcode_atts( array( 'department' => '', 'columns' => 4, 'limit' => 50 ), $atts, 'team' );

    if ( ! post_type_exists( 'team' ) ) {
        return '';
    }

    $key  = 'wpide_team_' . md5( wp_json_encode( $atts ) . get_option( 'wpide_team_ver', '1' ) );
    $html = get_transient( $key );

    if ( false !== $html ) {
        return $html;
    }

    $args = array(
        'post_type'      => 'team',
        'posts_per_page' => min( 100, absint( $atts['limit'] ) ),
        'orderby'        => array( 'menu_order' => 'ASC', 'title' => 'ASC' ),
        'fields'         => 'ids',
        'no_found_rows'  => true,
    );

    if ( $atts['department'] && taxonomy_exists( 'department' ) ) {
        $args['tax_query'] = array( array( 'taxonomy' => 'department', 'field' => 'slug', 'terms' => array_map( 'sanitize_title', explode( ',', $atts['department'] ) ) ) );
    }

    $ids  = get_posts( $args );
    $min  = (int) floor( 960 / min( 6, max( 1, absint( $atts['columns'] ) ) ) ) - 24;
    $html = '';

    foreach ( $ids as $id ) {
        $name  = esc_html( get_the_title( $id ) );
        $name  = is_post_publicly_viewable( $id ) ? '<a href="' . esc_url( get_permalink( $id ) ) . '">' . $name . '</a>' : $name;
        $role  = get_post_meta( $id, '_team_role', true );
        $html .= '<div class="team-member">' . get_the_post_thumbnail( $id, 'medium', array( 'loading' => 'lazy', 'style' => 'width:100%;height:auto;aspect-ratio:1;object-fit:cover' ) )
            . '<h3 class="team-name" style="margin:.5em 0 0">' . $name . '</h3>' . ( $role ? '<p class="team-role" style="margin:0">' . esc_html( $role ) . '</p>' : '' ) . '</div>';
    }

    $html = $html ? '<div class="team-grid" style="display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,' . $min . 'px),1fr))">' . $html . '</div>' : '';
    set_transient( $key, $html, DAY_IN_SECONDS );

    return $html;
} );

add_action( 'clean_post_cache', function ( $post_id, $post ) {
    if ( $post && 'team' === $post->post_type ) {
        update_option( 'wpide_team_ver', (string) microtime( true ), false );
    }
}, 10, 2 );
```

## Notes

Works with the Team post type and Team details snippets. Example: [team department="sales" columns="4"].

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Team Members Grid Shortcode" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/