A comprehensive guideline on how to use WP Team Pro filter hooks. We have added the following hooks for developers to extend functionalities. Simply add the following custom code to your current theme’s functions.php file. It’s recommended to keep the code in the functions.php file of your child theme. Because you might lose your customizations if the theme is updated. Keeping the modified codes in your parent theme’s child theme is therefore the best practice.
1) How to provide the plugin access to the Editors
2) How to remove the dynamic CSS from the WP Team Pro
3) How to load WP Team Pro dynamic CSS in the header section
4) How to add a custom company name for your team members
5) How to enable a shortcode in the team member’s short description
6) How to add custom image overlay icon for the team members
7) How to set a custom placeholder image for team members
8) How to set the height and width of the custom placeholder image
9) How to set a custom email icon for team members
1) How to provide the plugin access to the Editors
If you want to give the plugin access to the Editor role users you can do it easily with the help of the following custom code. If you check the code you can see there is an action hook (sp_wp_team_pro_ui_permission) available in the plugin which allows you to modify the plugin’s functionality.
// Give access to the Editors
function sp_team_pro_show_to_editor($capability){
$capability = 'edit_others_pages';
return $capability;
}
add_filter( 'sp_wp_team_pro_ui_permission', 'sp_team_pro_show_to_editor' );
2) How to remove the dynamic CSS from the WP Team Pro
Suppose you want to remove the dynamic CSS style from the team view. With the custom code below, you can easily do it. If you check the code, you will see there are two filter hooks available (team_pro_style_load_in_header, and sp_team_pro_dynamic_css) in the plugin which allow you to modify the plugin’s functionality.
// To remove WP Team Pro dynamic CSS add_filter( 'team_pro_style_load_in_header', '__return_false' ); add_filter( 'sp_team_pro_dynamic_css', '__return_false' );
3) How to load WP Team Pro dynamic CSS in the header section
If you want to load the dynamic CSS of WP Team Pro in the header section, you can do it with the custom code below. If you check the code, you will see there is a filter hook (team_pro_style_load_in_header) available through which you can do this.
// To load WP Team Pro dynamic CSS before team section add_filter( 'team_pro_style_load_in_header', '__return_false' );
4) How to add a custom company name for your team members
Suppose you want to add a custom company name for all of your team members, you can do it with the custom code below. If you check the code, you will see there is a filter hook (sp_team_pro_after_member_job_title) available through which you can do this.
// To add Company Name for all team members
function sptp_member_company_name(){
$company_name = '<h4 class="sptp-member-company">Company Name</h4>';
echo $company_name;
}
add_action( 'sp_team_pro_after_member_job_title', 'sptp_member_company_name', 10 );
5) How to enable a shortcode in the team member’s short description
If you want to enable a shortcode in the member’s short description, you can do it with the following custom code. If you check the code, you will see there is a filter hook (sptp_member_description) available through which you can do this.
// To enable shortcode in the short description
function sptp_member_short_desc_enable_shortcode($sptp_member_description){
return do_shortcode( $sptp_member_description );
}
add_action( 'sptp_member_description', 'sptp_member__short_desc_enable_shortcode', 10 );
6) How to add custom image overlay icon for the team members
Suppose you want to add a custom image overlay icon for the team members. Well, with the custom code below, you can easily add a custom image overlay icon. If you check the code, you will see there is a filter hook (sptp_member_image_overlay_icon) available in the plugin which allows you to modify the plugin’s functionality. For example, we have added a custom icon in the code. You can change it and use the icon you want.
// To add a custom image overlay icon
function sptp_member_image_overlay_custom_icon(){
return '<i class="fa fa-play"></i>';
}
add_filter( 'sptp_member_image_overlay_icon', 'sptp_member_image_overlay_custom_icon' );
7) How to set a custom placeholder image for team members
Suppose you want to set a custom placeholder image for your team members that have no member image. With the following code, you can do it easily. If you check the code, you will see there is a filter hook (sptp_member_placeholder_image_src) available in the plugin which allows you to modify the plugin’s functionality. You just need to copy and paste the URL of that placeholder image into the code after uploading it to your WordPress site.
// To add team member placeholder image
function sptp_member_custom_placeholder_image_src(){
// your-place-holder-image-url
return 'http://wp-team-pro.local/wp-content/uploads/2022/01/Demo-team-member-1.jpg';
}
add_filter( 'sptp_member_placeholder_image_src', 'sptp_member_custom_placeholder_image_src' );
8) How to set the height and width of the custom placeholder image
After adding a custom placeholder image for your team members, if you want to set a custom height and width for that placeholder image, you can do it with the following custom codes. You can see that there are two custom codes available, one for the height and the other for the width of the image.
// To set the width of custom placeholder image
function sptp_placeholder_image_width() {
return 300; // in pixel
}
add_filter( 'sptp_placeholder_image_width', 'sptp_placeholder_image_width' );
// To set the height of custom placeholder image
function sptp_placeholder_image_height() {
return 300; // in pixel
}
add_filter( 'sptp_placeholder_image_height', 'sptp_placeholder_image_height' );
9) How to set a custom email icon for team members
If you want to set a custom email icon for your team members, With the following custom code, you can do it easily. If you check the code, you will see that there is a filter hook (sp_team_pro_member_email_icon) available through which you can customize the icon. You just need to copy and paste the HTML code of the custom icon from Font Awesome (version 4) into the code.
// To set a custom email icon
function sp_team_pro_member_email_custom_icon(){
return '<i class="fa fa-envelope-open"></i>';
}
add_filter( 'sp_team_pro_member_email_icon', 'sp_team_pro_member_email_custom_icon' );