Below, you’ll find a detailed guide on how to add the Wp Team Showcase And Slider Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Wp Team Showcase And Slider Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Wp Team Showcase And Slider Plugin and the shortcodes it provides:
"Team Slider and Team Grid Showcase plus Team Carousel is a versatile WordPress plugin. It provides dynamic ways to display your team members in grid, slider, or carousel formats."
- [wp-team]
- []
Wp Team Showcase And Slider [wp-team] Shortcode
The WP Team Showcase and Slider plugin shortcode displays the team members in a grid view. It supports various page builders, including SiteOrigin, Divi, and Fusion Builder. This shortcode allows customization of the team display with parameters like ‘limit’, ‘category’, ‘design’, ‘grid’, ‘popup’, ‘order’, ‘orderby’, ‘extra_class’, ‘className’, and ‘align’. It also supports pagination and a popup view for team members.
Shortcode: [wp-team]
Parameters
Here is a list of all possible wp-team shortcode parameters and attributes:
limit– Determines the number of team members to display.category– Allows you to show team members from a specific category.design– Helps you choose the layout design for the team showcase.grid– Sets the number of columns in the grid.popup– Enables or disables the popup feature for team member details.order– Controls the order of team members, ascending or descending.orderby– Determines the parameter by which team members are sorted.extra_class– Allows for adding additional CSS classes.className– Assigns a class name to the team showcase.align– Sets the alignment of the team showcase.
Examples and Usage
Basic example – A basic usage of the shortcode to display the team showcase using the default parameters.
[wp-team]Advanced examples
Displaying the team showcase with a specific limit, category, and grid design. The limit parameter controls the number of team members to display, the category parameter allows you to specify a team category to display, and the grid parameter controls the number of columns in the grid.
[wp-team limit="10" category="management" grid="4"]Displaying the team showcase with a specific design and order. The design parameter allows you to choose a specific design for the team showcase, and the order parameter controls the order in which the team members are displayed.
[wp-team design="design-2" order="ASC"]Displaying the team showcase with a specific orderby parameter and popup set to false. The orderby parameter allows you to control the criteria by which the team members are ordered, and the popup parameter controls whether clicking on a team member will open a popup with more information.
[wp-team orderby="title" popup="false"]PHP Function Code
In case you have difficulties debugging what causing issues with [wp-team] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wp-team','get_wp_tsas_showcase');Shortcode PHP function:
function get_wp_tsas_showcase( $atts, $content = null ) {
// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
if( isset( $_POST['action'] ) && ($_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json') ) {
return "[wp-team]";
}
// Divi Frontend Builder - Do not Display Preview
if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
return '<div class="tsas-builder-shrt-prev">
<div class="tsas-builder-shrt-title"><span>'.esc_html__('Team Showcase Grid View - Shortcode', 'wp-team-showcase-and-slider').'</span></div>
wp-team
</div>';
}
// Fusion Builder Live Editor - Do not Display Preview
if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
return '<div class="tsas-builder-shrt-prev">
<div class="tsas-builder-shrt-title"><span>'.esc_html__('Team Showcase Grid View - Shortcode', 'wp-team-showcase-and-slider').'</span></div>
wp-team
</div>';
}
// Global Some Variables
global $post;
// setup the query
extract(shortcode_atts(array(
'limit' => -1,
'category' => '',
'design' => 'design-1',
'grid' => 3,
'popup' => 'true',
'order' => 'DESC',
'orderby' => 'date',
'extra_class' => '',
'className' => '',
'align' => '',
), $atts, 'wp-team'));
$shortcode_designs = tsas_designs();
$limit = ! empty( $limit ) ? $limit : -1;
$category = ! empty( $category ) ? explode(',', $category) : '';
$design = ( $design && ( array_key_exists( trim( $design ), $shortcode_designs ) ) ) ? trim( $design ) : 'design-1';
$gridcol = ! empty( $grid ) ? $grid : 3;
$order = ( strtolower( $order ) == 'asc' ) ? 'ASC' : 'DESC';
$orderby = ! empty( $orderby ) ? $orderby : 'date';
$teampopup = ( $popup == 'false' ) ? 'false' : 'true';
$popup_class = ( $teampopup == "true" ) ? 'tsas-enable-popup' : '';
$align = ! empty( $align ) ? 'align'.$align : '';
$extra_class = $extra_class .' '. $align .' '. $className;
$extra_class = wp_tsas_sanitize_html_classes( $extra_class );
$lazyload = '';
// Popup Configuration
$popup_id = wp_tsas_get_unique();
$popup_conf = compact('teampopup');
$per_row = wp_tsas_grid_column( $gridcol );
// Shortcode design file
$design_file_path = WP_TSAS_DIR . '/templates/designs/' . $design . '.php';
$design_file = (file_exists($design_file_path)) ? $design_file_path : '';
/***** Enqueus Required Script *****/
// First Dequeue if grid shortcode is placed before the slider shortcode
wp_dequeue_script( 'tsas-public-script' );
wp_enqueue_script( 'wpos-magnific-popup-jquery' );
wp_enqueue_script( 'tsas-public-script' );
// Count Variable
$count = 0;
$i = 1;
ob_start();
//defualt variable
$post_type = 'team_showcase_post';
// argument wp query
$args = array (
'post_type' => $post_type,
'orderby' => $orderby,
'order' => $order,
'posts_per_page' => $limit,
);
if( $category != "" ){
$args['tax_query'] = array( array( 'taxonomy' => 'tsas-category', 'field' => 'term_id', 'terms' => $category) );
}
// Wp Query
$query = new WP_Query( $args );
$post_count = $query->post_count;
if ( $query->have_posts() ) { ?>
<div class="wp-tsas-wrp <?php echo esc_attr($popup_class); ?> <?php echo esc_attr($extra_class); ?>" id="tsas-wrp-<?php echo esc_attr($popup_id); ?>">
<div class="wp_teamshowcase_grid <?php echo esc_attr($design); ?>">
<?php
while ( $query->have_posts() ) : $query->the_post();
$count++;
$feat_image = wp_get_attachment_url( get_post_thumbnail_id() );
$member_designation = get_post_meta( $post->ID, '_member_designation', true );
$member_department = get_post_meta( $post->ID, '_member_department', true );
$skills = get_post_meta( $post->ID, '_skills', true );
$member_experience = get_post_meta( $post->ID, '_member_experience', true );
$facebook_link = get_post_meta( $post->ID, '_facebook_link', true );
$google_link = get_post_meta( $post->ID, '_google_link', true );
$likdin_link = get_post_meta( $post->ID, '_likdin_link', true );
$twitter_link = get_post_meta( $post->ID, '_twitter_link', true );
// first class and last class
$css_class ="team-grid";
if( $count % $grid == 1 ){
$css_class .= ' tsas-first';
} elseif ( $count == $grid ) {
$count = 0;
$css_class .= ' tsas-last';
}
$class = 'wp-tsas-medium-'.$per_row.' wp-tsas-columns';
// Include shortcode html file
if( $design_file ) {
include( $design_file );
}
//Popup file
if( $teampopup == "true" ) {
include(WP_TSAS_DIR. '/templates/popup/popup-design-1.php');
}
$i++;
endwhile;
?>
</div>
</div>
<?php }
wp_reset_postdata();
return ob_get_clean();
}
Code file location:
wp-team-showcase-and-slider/wp-team-showcase-and-slider/includes/shortcodes/tsas-shortcode.phpWp Team Showcase And Slider [null] Shortcode
The WP Team Showcase and Slider plugin shortcode is a versatile tool that displays a team member slider with various customizable features. The shortcode is: [wp-team-slider]. This shortcode enables you to set the limit on the number of team members displayed, select the design, control the slider’s speed, and much more. It also includes compatibility checks for various page builders like SiteOrigin, Divi, and Fusion Builder. The shortcode ensures the plugin functions seamlessly within these builders, providing a smooth user experience. With this shortcode, you can easily showcase your team members in an interactive and engaging way.
Shortcode: [null]
Parameters
Here is a list of all possible null shortcode parameters and attributes:
limit– Specifies the number of team members to display.category– Filters team members by a specific category.design– Defines the style of the team showcase slider.slides_column– Determines the number of slides to display in a single view.slides_scroll– Indicates the number of slides to scroll at a time.dots– Enables or disables slider dots navigation.arrows– Enables or disables slider arrows navigation.autoplay– Enables or disables automatic sliding.autoplay_interval– Sets the delay between automatic slide transitions.speed– Defines the speed of slide transitions.popup– Enables or disables a popup for team member details.order– Sets the order of team members, either ascending or descending.orderby– Defines the parameter to order team members by.lazyload– Enables or disables lazy loading for images.extra_class– Adds extra CSS classes to the slider.className– Defines a CSS class for the slider.align– Sets the alignment of the slider.
Examples and Usage
Basic example – Displaying a team showcase slider with default settings.
[wp-team-slider]Advanced examples
Displaying a team showcase slider with a specific category and limit.
[wp-team-slider category="5" limit="10"]Displaying a team showcase slider with custom design, number of slides to show and scroll at a time.
[wp-team-slider design="design-2" slides_column="4" slides_scroll="2"]Displaying a team showcase slider with custom autoplay interval and speed.
[wp-team-slider autoplay_interval="4000" speed="500"]Displaying a team showcase slider with arrows and dots disabled.
[wp-team-slider arrows="false" dots="false"]Displaying a team showcase slider with specific order and orderby parameters.
[wp-team-slider order="ASC" orderby="title"]Displaying a team showcase slider with lazyload enabled.
[wp-team-slider lazyload="ondemand"]PHP Function Code
In case you have difficulties debugging what causing issues with [null] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wp-team-slider', 'get_wp_tsas_showcase_slider' );Shortcode PHP function:
function get_wp_tsas_showcase_slider( $atts, $content = null ){
// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
if( isset( $_POST['action'] ) && ($_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json') ) {
return "[wp-team-slider]";
}
// Divi Frontend Builder - Do not Display Preview
if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
return '<div class="tsas-builder-shrt-prev">
<div class="tsas-builder-shrt-title"><span>'.esc_html__('Team Showcase Grid View - Shortcode', 'wp-team-showcase-and-slider').'</span></div>
wp-team-slider
</div>';
}
// Fusion Builder Live Editor - Do not Display Preview
if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
return '<div class="tsas-builder-shrt-prev">
<div class="tsas-builder-shrt-title"><span>'.esc_html__('Team Showcase Grid View - Shortcode', 'wp-team-showcase-and-slider').'</span></div>
wp-team-slider
</div>';
}
// Global Some Variable
global $post;
// setup the query
extract(shortcode_atts(array(
'limit' => -1,
'category' => '',
'design' => 'design-1',
'slides_column' => 3,
'slides_scroll' => 1,
'dots' => 'true',
'arrows' => 'true',
'autoplay' => 'true',
'autoplay_interval' => 3000,
'speed' => 300,
'popup' => 'true',
'order' => 'DESC',
'orderby' => 'date',
'lazyload' => '',
'extra_class' => '',
'className' => '',
'align' => '',
), $atts, 'wp-team-slider'));
$shortcode_designs = tsas_designs();
$popup_id = wp_tsas_get_unique();
$limit = ! empty( $limit ) ? $limit : -1;
$category = ! empty( $category ) ? explode(',', $category) : '';
$design = ( $design && ( array_key_exists( trim( $design ), $shortcode_designs ) ) ) ? trim( $design ) : 'design-1';
$teampopup = ( $popup == 'false' ) ? 'false' : 'true';
$dots = ( $dots == 'false' ) ? 'false' : 'true';
$arrows = ( $arrows == 'false' ) ? 'false' : 'true';
$autoplay = ( $autoplay == 'false' ) ? 'false' : 'true';
$autoplay_interval = ! empty( $autoplay_interval ) ? $autoplay_interval : 3000;
$speed = ! empty( $speed ) ? $speed : 300;
$slides_column = ! empty( $slides_column ) ? $slides_column : 3;
$slides_scroll = ! empty( $slides_scroll ) ? $slides_scroll : 1;
$order = ( strtolower( $order ) == 'asc' ) ? 'ASC' : 'DESC';
$orderby = ! empty( $orderby ) ? $orderby : 'date';
$popup_class = ( $teampopup == "true" ) ? 'tsas-enable-popup' : '';
$lazyload = ( $lazyload == 'ondemand' || $lazyload == 'progressive' ) ? $lazyload : ''; // ondemand or progressive
$align = ! empty( $align ) ? 'align'.$align : '';
$extra_class = $extra_class .' '. $align .' '. $className;
$extra_class = wp_tsas_sanitize_html_classes( $extra_class );
// Popup Configuration
$slider_conf = compact('slides_column', 'slides_scroll', 'dots', 'arrows', 'autoplay', 'autoplay_interval', 'speed', 'lazyload');
// Shortcode file
$design_file_path = WP_TSAS_DIR . '/templates/designs/' . $design . '.php';
$design_file = (file_exists($design_file_path)) ? $design_file_path : '';
/***** Enqueus Required Script *****/
// First Dequeue if grid shortcode is placed before the slider shortcode
wp_dequeue_script( 'tsas-public-script' );
wp_enqueue_script( 'wpos-slick-jquery' );
wp_enqueue_script( 'wpos-magnific-popup-jquery' );
wp_enqueue_script( 'tsas-public-script' );
// Some Variables
$popup_html = '';
$count = 0;
$i = 1;
ob_start();
// defualt variables
$post_type = 'team_showcase_post';
// Post argument
$args = array (
'post_type' => $post_type,
'orderby' => $orderby,
'order' => $order,
'posts_per_page' => $limit,
);
// taxonomy query
if( $category != "" ){
$args['tax_query'] = array( array( 'taxonomy' => 'tsas-category', 'field' => 'term_id', 'terms' => $category) );
}
// wp Query
$query = new WP_Query( $args );
$post_count = $query->post_count;
// wp query condition
if ( $query->have_posts() ) { ?>
<div class="wp-tsas-slider-wrap <?php echo esc_attr($extra_class); ?>">
<div id="wp-tsas-slider-<?php echo esc_attr($popup_id); ?>" class="wp_teamshowcase_slider <?php echo esc_attr($popup_class); ?> <?php echo esc_attr($design); ?>">
<?php
while ( $query->have_posts() ) : $query->the_post();
$count++;
$feat_image = wp_get_attachment_url( get_post_thumbnail_id() );
$member_designation = get_post_meta( $post->ID, '_member_designation', true );
$member_department = get_post_meta( $post->ID, '_member_department', true );
$skills = get_post_meta( $post->ID, '_skills', true );
$member_experience = get_post_meta( $post->ID, '_member_experience', true );
$facebook_link = get_post_meta( $post->ID, '_facebook_link', true );
$google_link = get_post_meta( $post->ID, '_google_link', true );
$likdin_link = get_post_meta( $post->ID, '_likdin_link', true );
$twitter_link = get_post_meta( $post->ID, '_twitter_link', true );
$css_class ="team-slider";
$class = '';
// Include shortcode html file
if( $design_file ) {
include( $design_file );
}
// Include Popup html file
if( $teampopup == "true" ) {
ob_start();
include(WP_TSAS_DIR. '/templates/popup/popup-design-1.php');
$popup_html .= ob_get_clean();
}
$i++;
endwhile;
?>
</div>
<?php echo $popup_html; // Print Popup HTML ?>
<div class="slider-conf-data" data-conf="<?php echo htmlspecialchars(json_encode($slider_conf)); ?>"></div>
</div>
<?php
wp_reset_postdata();
return ob_get_clean();
}
}
Code file location:
wp-team-showcase-and-slider/wp-team-showcase-and-slider/includes/shortcodes/tsas-slider-shortcode.phpConclusion
Now that you’ve learned how to embed the Wp Team Showcase And Slider Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply