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.
Opens WPIDE on
Code
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.