Below, you’ll find a detailed guide on how to add the AMO Team Showcase 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 AMO Team Showcase Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the AMO Team Showcase Plugin and the shortcodes it provides:
"AMO Team Showcase is a powerful WordPress plugin that helps you create and display your team on your website in a beautiful and professional manner. Perfect for business sites."
- [amoteam]
- [amo_member]
- [amoteam_text]
- [amoteam_skills]
- [amoteam_skill]
AMO Team Showcase [amoteam] Shortcode
The ‘amoteam’ shortcode from the amo-team-showcase plugin creates a customizable team showcase on your page. It adjusts member display limit, categorization, item sizing, alignment, and ordering. This function supports a variety of attributes such as ‘max’ for maximum members, ‘categories’ for grouping, ‘item-width’ for size control, ‘orderby’ for sorting, and more. It also includes sanitization to limit the maximum number of members to 200 per shortcode. The shortcode enqueues necessary scripts, initiates render dependencies, and sets up team query arguments. It then returns a loop output for the team or member display.
Shortcode: [amoteam]
Parameters
Here is a list of all possible amoteam shortcode parameters and attributes:
max– maximum number of team members to displaycategories– filter team members by specific categoriesitem-width– set the width of each team member cardfull-width– make the team showcase span the full width of the pageitem-margin– adjust the space between each team member cardpanel– set the position of the team member information panelorderby– order team members by date, title, or randomalign– set the alignment of the team showcasestyle– apply a specific style to the team showcaseclass– add a custom CSS class to the team showcase
Examples and Usage
Basic example – Displaying a team showcase with default parameters.
[amoteam /]In the above example, the shortcode will display a team showcase with all the default parameters such as maximum 50 members, item width of 250, full-width display, an item margin of 20, right panel, and ordered by date.
Advanced examples – Displaying a team showcase with custom parameters.
Modifying the maximum number of team members displayed, item width, and ordering.
[amoteam max=10 item-width=300 orderby=title-desc /]In this example, the shortcode will display a team showcase with a maximum of 10 members, an item width of 300, and ordered by title in descending order.
Displaying a team showcase from a specific category.
[amoteam categories=5 /]This example will display a team showcase with members from the category with ID 5.
Combining multiple parameters for a more specific team showcase.
[amoteam max=20 categories=3,4 item-width=350 full-width=no item-margin=30 panel=left orderby=rand /]This advanced example will display a team showcase with a maximum of 20 members from categories with IDs 3 and 4, an item width of 350, non-full-width display, an item margin of 30, left panel, and ordered randomly.
PHP Function Code
In case you have difficulties debugging what causing issues with [amoteam] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'amoteam', array( $this, 'sc_amoteam' ) );Shortcode PHP function:
function sc_amoteam( $atts ) {
// Attributes
$a = shortcode_atts(
array(
'max' => 50,
'categories' => false,
'item-width' => '250',
'full-width' => 'yes',
'item-margin' => '20',
'panel' => 'right',
'orderby' => 'date',
'align' => false, // not present in the SC
'style' => false, // not present in the SC
'class' => '', // not present in the SC
), $atts );
$order_vals = $team_query_args = array();
/* SANITIZATION
-------------------------------------------------------------------*/
// Prevent max number of members be more than 200 per the shortcode
if ( $a['max'] > 200) { $a['max'] = 200; }
/* PREPARATION
-------------------------------------------------------------------*/
// enqueue scripts needed for plugin's shortcode
$this->plugin_public->enqueue_public_scripts_on_demand();
// initiate render dependencies
$this->gpo->render_dependencies( $this, true );
// if categories are set in the shortcode
$categories = $a['categories'] ? array(
array(
'taxonomy' => 'amo-team-category',
'terms' => explode( ',', $a['categories'] ),
),
) : '';
// Divide the value to orderby and order values, needed for query
if ( strpos($a['orderby'], '-') !== false ) {
$order_vals = explode('-', strtolower( $a['orderby'] ) );
// check if orderby value was specified properly (only a few certain values possible)
if ( in_array($order_vals[0], array( 'date', 'title', 'modified', 'rand' ) ) ) {
$a['orderby'] = $order_vals[0];
// check if "order" query parameter was specified correctly
if ( in_array( $order_vals[1], array( 'asc', 'desc' ) ) ) {
$team_query_args['order'] = strtoupper( $order_vals[1] );
}
} else {
$a['orderby'] = 'date';
} // IF | 'date', 'title', 'modified', 'rand'
} elseif ( 'rand' == $a['orderby']) {
} else {
$a['orderby'] = 'date';
} // IF
// Team query arguments
$team_query_args += array(
'post_type' => 'amo-team',
'posts_per_page' => $a['max'],
'tax_query' => $categories,
'orderby' => 'menu_order ' . $a['orderby'],
);
/* LOOP AND OUTPUT
-------------------------------------------------------------------*/
return $this->team_or_member_loop('team', $a, apply_filters( 'amo_team_shortcode_wp_query_args', $team_query_args ) );
}
Code file location:
amo-team-showcase/amo-team-showcase/public/class-amo-team-showcase-shortcodes.phpAMO Team Showcase [amo_member] Shortcode
The amo-team-showcase plugin shortcode, ‘amo_member’, displays specific team members on your website. It utilizes a variety of attributes for customization, such as ‘id’, ‘item-width’, ‘item-margin’, ‘full-width’, ‘panel’, ‘align’, ‘style’, and ‘class’. This shortcode queries the ‘amo-team’ post type based on provided IDs and displays the team members accordingly. It also handles script enqueuing and rendering dependencies.
Shortcode: [amo_member]
Parameters
Here is a list of all possible amo_member shortcode parameters and attributes:
id– Unique identifier of the team member.item-width– Width of the team member’s item, default is ‘250’.item-margin– Margin for the team member’s item, default is ’20’.full-width– If set to ‘yes’, the item will occupy full width.panel– Defines the panel position, default is ‘right’.align– Aligns the team member’s item, not used in the shortcode.style– Sets the style of the item, not used in the shortcode.class– Adds a custom class to the item, not used in the shortcode.
Examples and Usage
Basic example – Showcases a single member from the team using their ID.
[amo_member id=1 /]Advanced examples
Displaying a single member with a specific item width and margin.
[amo_member id=1 item-width=300 item-margin=30 /]Using the shortcode to display a single member with a full-width panel aligned to the right.
[amo_member id=1 full-width=yes panel=right /]Showing multiple members by referencing their IDs. The members will be displayed in the order of their IDs.
[amo_member id=1,2,3 /]Displaying a single member with a specific CSS class. This allows for custom styling of the member’s display.
[amo_member id=1 class="my-custom-class" /]PHP Function Code
In case you have difficulties debugging what causing issues with [amo_member] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'amo_member', array( $this, 'sc_amo_member' ) );Shortcode PHP function:
function sc_amo_member( $atts ) {
// Attributes
$a = shortcode_atts(
array(
'id' => false,
'item-width' => '250',
'item-margin' => '20',
'full-width' => 'yes',
'panel' => 'right',
'align' => false,
'style' => false, // not present in the SC
'class' => '', // not present in the SC
), $atts );
/* SANITIZATION
-------------------------------------------------------------------*/
// If post id is empty, return
if ( ! $a['id'] ) return false;
// Prepare id/ids for WP query
$a['id'] = explode( ',', $a['id'] );
/* PREPARATION
-------------------------------------------------------------------*/
// enqueue scripts needed for plugin's shortcode
$this->plugin_public->enqueue_public_scripts_on_demand();
// initiate render dependencies
$this->gpo->render_dependencies( $this, true );
// Team query arguments
$team_query_args = array(
'post_type' => 'amo-team',
'post__in' => $a['id'],
'orderby' => 'post__in',
'posts_per_page' => - 1,
);
/* LOOP AND OUTPUT
-------------------------------------------------------------------*/
return $this->team_or_member_loop( 'member', $a, $team_query_args );
}
Code file location:
amo-team-showcase/amo-team-showcase/public/class-amo-team-showcase-shortcodes.phpAMO Team Showcase [amoteam_text] Shortcode
The ‘amoteam_text’ shortcode from the AMO Team Showcase plugin is designed to display a text block with a title and subtitle. This shortcode allows users to customize the text block with specific attributes such as ‘title’, ‘subtitle’, and ‘class’. The ‘class’ attribute is not present in the shortcode by default. The shortcode also includes a function to highlight either the title or the subtitle, depending on which is present. The shortcode then renders the text block, enqueues necessary scripts, and initiates render dependencies. The final output is a styled text block with a title and subtitle, ready for display on your WordPress site.
Shortcode: [amoteam_text]
Parameters
Here is a list of all possible amoteam_text shortcode parameters and attributes:
title– sets the main title for the text blocksubtitle– sets the subtitle for the text blockclass– allows custom CSS classes for styling the text block
Examples and Usage
Basic example – A simple usage of the shortcode to display a text block with a title.
[amoteam_text title="Our Team" /]Advanced examples
Using the shortcode to display a text block with a title and subtitle. The title will be highlighted in the subtitle.
[amoteam_text title="Our Team" subtitle="Meet our dedicated team members" /]Using the shortcode to display a text block with a title, subtitle, and custom class. The custom class will be added to the text block, allowing for additional styling options.
[amoteam_text title="Our Team" subtitle="Meet our dedicated team members" class="custom-class" /]Using the shortcode to display a text block with a title and embedded content. The content will be processed for shortcodes before being displayed.
[amoteam_text title="Our Team"]Welcome to our team page. Here you can meet our dedicated team members.
[/amoteam_text]PHP Function Code
In case you have difficulties debugging what causing issues with [amoteam_text] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'amoteam_text', array( $this, 'sc_amo_text_block' ) );Shortcode PHP function:
function sc_amo_text_block( $atts, $content = "" ) {
// Attributes
$a = shortcode_atts(
array(
'title' => '',
'subtitle' => '',
'class' => '', // not present in the SC
), $atts );
/* Prepare variables for the template
-------------------------------------------------------------------*/
if ( $a['subtitle'] ) {
$a['subtitle'] = $this->highlight_word( $a['subtitle'], $a['title'] );
} else {
$a['title'] = $this->highlight_word( $a['title'], $a['subtitle'] );
$a['class'] .= ' {p}panel-sc-only-title';
} // IF is subtitle
/* Prepare to render the template
-------------------------------------------------------------------*/
// enqueue scripts needed for plugin's shortcode
$this->plugin_public->enqueue_public_scripts_on_demand();
// initiate render dependencies
$this->gpo->render_dependencies( $this, true );
// render the shortcode
$this->renderer->set_variables( array(
'title' => $a['title'],
'subtitle' => $a['subtitle'],
'class' => $a['class'],
'content' => do_shortcode( $content ),
) );
$html = $this->renderer->render( 'sc-text-block' );
return $html;
}
Code file location:
amo-team-showcase/amo-team-showcase/public/class-amo-team-showcase-shortcodes.phpAMO Team Showcase [amoteam_skills] Shortcode
The AMOTeam Skills shortcode is a functional element of the AMOTeam plugin that helps display team members’ skills. The shortcode accepts two parameters – ‘title’ and ‘class’. ‘Title’ allows you to highlight a specific skill, while ‘class’ is used to customize the display. The shortcode then enqueues necessary scripts and initiates rendering dependencies. It finally renders the shortcode, returning the HTML.
Shortcode: [amoteam_skills]
Parameters
Here is a list of all possible amoteam_skills shortcode parameters and attributes:
title– The title that appears on the skill showcaseclass– Additional CSS classes to style the skills showcase
Examples and Usage
Basic example – A simple use of the ‘amoteam_skills’ shortcode to showcase a team’s skills. No additional parameters are specified in this case.
[amoteam_skills /]Advanced examples
Here, we are using the ‘amoteam_skills’ shortcode with the ‘title’ parameter. This will display a team’s skills under the specified title.
[amoteam_skills title="Our Team Skills" /]In this next example, we use both the ‘title’ and ‘class’ parameters. The ‘class’ parameter allows you to apply a specific CSS class to the skills showcase for customized styling.
[amoteam_skills title="Our Team Skills" class="custom-class" /]Lastly, we show an example where the ‘amoteam_skills’ shortcode is used with nested content. This content will be processed and displayed within the skills showcase.
[amoteam_skills title="Our Team Skills"]
Nested content goes here.
[/amoteam_skills]PHP Function Code
In case you have difficulties debugging what causing issues with [amoteam_skills] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'amoteam_skills', array( $this, 'sc_amo_skills' ) );Shortcode PHP function:
function sc_amo_skills( $atts, $content = "" ) {
// Attributes
$a = shortcode_atts(
array(
'title' => '',
'class' => '', // not present in the SC
), $atts );
/* Prepare variables for the template
-------------------------------------------------------------------*/
$a['title'] = $this->highlight_word( $a['title'] );
/* Prepare to render the template
-------------------------------------------------------------------*/
// enqueue scripts needed for plugin's shortcode
$this->plugin_public->enqueue_public_scripts_on_demand();
// initiate render dependencies
$this->gpo->render_dependencies( $this, true );
// render the shortcode
$this->renderer->set_variables( array(
'title' => $a['title'],
'class' => $a['class'],
'content' => do_shortcode( $content ),
) );
$html = $this->renderer->render( 'sc-skills' );
return $html;
}
Code file location:
amo-team-showcase/amo-team-showcase/public/class-amo-team-showcase-shortcodes.phpAMO Team Showcase [amoteam_skill] Shortcode
The amo-team-showcase plugin’s shortcode, ‘amoteam_skill’, is designed to showcase individual skill sets. It takes attributes such as ‘title’, ‘percent’, and ‘class’. This shortcode generates a visually appealing skill bar, with the ‘title’ representing the skill, ‘percent’ indicating proficiency, and ‘class’ for additional styling.
Shortcode: [amoteam_skill]
Parameters
Here is a list of all possible amoteam_skill shortcode parameters and attributes:
title– Defines the name of the skill being showcased.percent– Indicates the proficiency level of the skill in percentage.class– Specifies an optional CSS class for custom styling.
Examples and Usage
Basic example – Displays a single skill with a title and percentage.
[amoteam_skill title="Communication" percent="90" /]Advanced examples
Displays a single skill with a title, percentage, and a custom class for advanced CSS styling.
[amoteam_skill title="Leadership" percent="85" class="custom-skill" /]Displays a single skill without a title, only the percentage is shown. The custom class is used for advanced CSS styling.
[amoteam_skill percent="75" class="no-title-skill" /]Displays a single skill without a percentage, only the title is shown. The custom class is used for advanced CSS styling.
[amoteam_skill title="Teamwork" class="no-percent-skill" /]PHP Function Code
In case you have difficulties debugging what causing issues with [amoteam_skill] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'amoteam_skill', array( $this, 'sc_amo_single_skill' ) );Shortcode PHP function:
function sc_amo_single_skill( $atts ) {
// Attributes
$a = shortcode_atts(
array(
'title' => '',
'percent' => '',
'class' => '', // not present in the SC
), $atts );
/* Prepare to render the template
-------------------------------------------------------------------*/
$html = '';
if ( is_object( $this->renderer ) ) {
// render the shortcode
$this->renderer->set_variables( array(
'title' => $a['title'],
'percent' => $a['percent'],
'class' => $a['class'],
) );
$html = $this->renderer->render( 'sc-skills-single' );
}
return $html;
}
Code file location:
amo-team-showcase/amo-team-showcase/public/class-amo-team-showcase-shortcodes.phpConclusion
Now that you’ve learned how to embed the AMO Team Showcase 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