Infinity Pro – Sort & Filter Team Members

This tutorial provides the code which enables you to filter team members who are listed using the Team Page template. The team template is included in the Infinity Pro child theme by default.

The code included in this tutorial extends the templates functionality so you sort by different criteria which is fully customizable.

Here’s the Infinity Pro demo on the StudioPress theme page followed by the modified template you can see in the following screenshot which includes the drop down filters added to the template:

Note : You can also choose to use check boxes instead of drop down menus if you prefer.

The drop down menus for each filter enable you to filter by job title, last name and location. Each menu can be configured to filter by any data source type including a large range of post, taxonomy and custom field data sources.

In this example, the filters source data for the job title and last name from custom fields and the data source for location comes from categories. You can also use tags and other taxonomy types including custom taxonomy types.

Here’s the demo video which shows how the team template filters work.

Demo Video

The video shows how the filters enable you to sort different types of existing data to display team members by the different criteria you select in the drop down filters. It also shows how the pagination works and the template displays on different sized screens for mobile responsiveness.

Note : The Infinity Pro themes team template can be used in other Genesis child themes fairly easily by copying over the page_team.php file and all the CSS located under the Team Page section of the style.css file around line 1579

Template Installation

There’s 4 steps involved to add the filters to the Infinity Pro themes team template.

Step 1 : Replace the page_team.php file in the Infinity Pro themes root directory with the team.php file included in the download folder below for members.

Step 2 : Add the CSS from the style.css file included in the download folder to the end of the Infinity Pro themes style.css file, just before the start of the CSS for Media Queries around line 1830.