Add Social Media Linked Icons To Team Template In Infinity Pro Theme

The Infinity Pro child theme by StudioPress includes a team template which only displays:

1. The headshot of each team member
2. The team members name
3. The team members title

Here’s an example of the default team template included in Infinity Pro:

The code in this tutorial enables you to add any type of social media icon linked to any URL of your choosing after the title like this.

The tutorial also includes code to add multiple social media linked icons like this:

You can also choose which icons you want to load. In this example we’re using a Twitter Dashicon. You’ll also find find code in this tutorial to use Ion Icons instead of Dashicons.

Adding The Social Links

The twitter link is added using a custom field named team_twitter. Use the same method to add your social media link as you would for adding your team_title.

Create a new custom field named team_twitter and add the URL to your social media account to the value field as seen in the following image:

In the above image, a link to the Twitter account is added which links the Twitter dashicon added after the title.

Mobile Responsiveness

Note: make sure you use exactly the same sized featured images as used in the StudioPress theme setup guide for the demo as this size is what is has been tested with the social media icons and resizes perfectly so they stay centered below the headshot on all screen widths.

Usage on Other Genesis Child Themes

You can simply copy the page_team.php file to any other Genesis child theme and use it. You’ll also need to copy the CSS from the Infinity Pro child themes style.css file and a small amount of PHP code from the functions file for the image sizes.

Here’s the code for logged in members:

Related Tutorials

• Genesis User Profiles Template