WP Team Pro

  1. Home
  2. Docs
  3. WP Team Pro
  4. Hooks: Actions and Filters

Hooks: Actions and Filters

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 remove the dynamic CSS from the WP Team Pro

2) How to load WP Team Pro dynamic CSS before the team section

3) How to add a custom company name for your team members

4) How to enable a shortcode in the team member’s short description

5) How to add custom image overlay icon for the team members

6) How to set a custom placeholder image for team members

7) How to set the height and width of the custom placeholder image

8) How to set a custom email icon for team members

 

1) 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' );

2) How to load WP Team Pro dynamic CSS before the team section

If you want to load the dynamic CSS of WP Team Pro before the team 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' );

3) 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 (team_pro_style_load_in_header) available through which you can do this.

// To add Company Name for all team members
add_action( 'sp_team_pro_after_member_job_title', 'sptp_member_company_name', 10 );
function sptp_member_company_name(){
    $company_name = '<h4 class="sptp-member-company">Company Name</h4>';
    echo $company_name;
}

4) 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
add_action( 'sptp_member_description', 'sptp_member__short_desc_enable_shortcode', 10 );
function sptp_member_short_desc_enable_shortcode($sptp_member_description){
    return do_shortcode( $sptp_member_description );
}

5) 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
add_filter( 'sptp_member_image_overlay_icon', 'sptp_member_image_overlay_custom_icon' );
function sptp_member_image_overlay_custom_icon(){
    return '<i class="fa fa-play"></i>';
}

6) 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 
add_filter( 'sptp_member_placeholder_image_src', 'sptp_member_custom_placeholder_image_src' );
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';
}

7) 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
add_filter( 'sptp_placeholder_image_width', 'sptp_placeholder_image_width' );
function sptp_placeholder_image_width() {
    return 300; // in pixel
}
// To set the height of custom placeholder image
add_filter( 'sptp_placeholder_image_height', 'sptp_placeholder_image_height' );
function sptp_placeholder_image_height() {
    return 300; // in pixel
}

8) 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 
add_filter( 'sp_team_pro_member_email_icon', 'sp_team_pro_member_email_custom_icon' );
function sp_team_pro_member_email_custom_icon(){
    return '<i class="fa fa-envelope-open"></i>';
}