Building a WordPress Member Directory Page

The ProfilePress plugin gives you the ability to create unlimited WordPress member directories for your membership site.

If you run a membership or community site, you’ll need an easy way for people to get in touch with one another. This means making everyone’s contact information and other key details readily available. To do that, you can put together a WordPress user directory.

To create a new member directory, navigate to ProfilePress > Member Directories and click on the Add New button.

Enter a name for your new member directory and click on the Select Template button to create the directory.

Next, you will be taken to your newly created member directory, where you can specify what fields to display in the directory and set up the criteria (directory settings).

Editing the Member Directory Fields.

You can specify what fields to display on a particular Member Directory. Simply drag the field from the Standard Fields section and drop it on the directory content area section.

If you have the custom fields addon activated, you will see the section to drag and drop them to the directory.

After making your modifications, click on the Save Changes button to save your changes. To preview your Member Directory at this point, click on the Live Preview button.

Note: The Biography of the user Kyle Bruce is not displayed, this is because the field has not been filled out in the user profile. This means that blank fields are not visible when the Member Directory is displayed. Also, we can set up a Field Title that will be displayed before the user profile data.

Customizing the Member Directory Field Title

To edit the field title, follow the steps described below.

Click on the Cog Setting Icon located at the end of the field.
A modal is displayed showing an input field. Enter the title for the field.
Click on the Apply Changes button to save the field title.

Note: The Member Directory Fields can be sorted. Just hover over the field and drag it to the desired position, and save your changes.

Now, after saving your changes, click on the Live Preview button to see how the Member Directory will be displayed on the front-end.

Tip: Instead of showing both the First and Last Name fields separately, you can use the Display Name field formatting option to customize this and display both fields together. To do this, follow the steps described below.

Click on the Cog Setting Icon button on the Display Name field.
A modal is displayed. Locate the Format field on the modal, and select First & Last Name.
Click on the Apply Changes button.

Note: You can remove the First and Last Name field since we are now using the Display Name field to show the First and Last Name of the user. To remove a field, hover over the field, click on the Delete Icon button, and confirm the operation when prompted.

After making all the modifications, don’t forget to click on the Save Changes button to save your changes.

At this point, let’s click on the Live Preview button to preview the Member Directory one more time.

Configuring the Member Directory Settings

Earlier in this tutorial, we talked about the member directory criteria and said they are like rules or filters used to determine the members listed or displayed on a particular directory. The Directory Settings section is where you can carry out such operations.

The Directory Settings consists of five settings groups which are listed below.

Appearance
Sorting
Search
Result & Pagination
Colours

Directory Settings – Appearance

These settings are used to control members’ visibility. It consists of the following settings listed below.

User Roles to Display: This setting is used to select the user roles that should be visible or be part of the directory.

Comma Separated List of Users ID to Only Show: This setting is used to specify a list of users ID to only show. If both the Comma Separated List of Users ID to Only Show and User Roles to Display settings are set and the user’s role doesn’t exist in the User Roles to Display setting, then that particular member will still not be visible in the Member Directory.

And if a particular user ID appears in the Comma Separated List of Users ID to Only Show setting and also in the Comma Separated List of Users ID to Exclude setting, then the member will be visible in the Member Directory. The reason is that precedence is given to the Comma Separated List of Users ID to Only Show setting.

Comma Separated List of Users ID to Exclude: This setting is used to specify a list of users ID to exclude.

Enable Profile Picture: This setting specifies whether the profile picture of the members in the directory should be visible or not. This is enabled by default.

If we disable the profile picture, then this is how the Member Directory will be displayed on the front-end.

Directory Settings – Sorting

These settings are used to control how the members in the directory are sorted. It consists of the following settings listed below.

Default Sorting Method: Specifies how the members in the directory will be sorted when viewed on the front-end. By default, the newest members will be listed first in the directory. You can also sort by oldest users first.

Enable custom sorting: Specifies whether to show a sorting dropdown menu on the front-end when the Members Directory is displayed.

With the above custom sorting, when the Members Directory is previewed, this is what the sorting dropdown menu will look like.

Directory Settings – Search

These settings are used to control how the members in the directory can be searched or filtered out.

Important: For this to work properly and display the right search result, the Permalink Structure must not be set to Plain. To set the Permalink Structure, go to WordPress Dashboard >> Settings >> Permalinks, then select the structure you want, but don’t set it to Plain.

The Search Directory Settings consists of the following sub-settings listed below.

Search Fields: Specifies whether to enable or disable the search functionality of the Members Directory. This is enabled by default which means users can search and filter members in the directory.

Note: When disabled, all search-related functionalities (such as search form, members filters, etc.) will be removed completely when the Members Directory is displayed on the front-end of your website.

Search Fields: Specifies the user’s profile fields to search in. If no field is specified, then the search keyword will be ignored and the search result will always return all the members in the directory.
For example, by specifying the above fields as shown in the image above, then users can search for a particular member either by Email Address, Display Name, First Name, or Last Name. So when a member is searched for in the Members Directory, this is what the result would look like.
From the search results shown in the image above, two users were matched using the keyword john, and the fields where the matches occur have been marked out for demonstration purposes.

Enable Filters: Specifies whether to display a dropdown menu that will allow users to be able to filter members in the directory. Even if the Filters are enabled, the dropdown will not be displayed unless the Filter Fields are set, which we will discuss below.

Filter Fields: Specifies the custom fields that members can be filtered by.Note: Only Select, Checkbox, Radio, Country, and Date/Time fields are supported.

The Gender custom field has been added to the Filter Fields setting. This will enables users to filter the members in the directory by their gender.

Directory Settings – Result & Pagination

These settings are used to control members’ search results in the directory and set up the pagination limit.

Show Results Only After a Search: If enabled, members in the directory will only be visible or displayed after a search is performed. For the search form to be visible, the Directory Settings >> Search >> Display Search Form setting must be enabled.
Number of Members per Page: Specifies the number of members to show per page when the members are displayed in the directory.
Results Text: Specifies the results text to show after a search is performed. By default, this is set to “{total_users} Members”. The {total_users} placeholder represents the total number of members found in the search results.
Single Result Text: This does the same thing as the Results Text, but used only when the search result returned just a single member in the directory.
No Result Text: Specifies the text to show when the search result is empty.

Directory Settings – Colors

These settings are used to control the text and background colors of search fields and pagination links.

Based on the colour settings in the image above, below is a descriptive image that shows how the colors are applied when the members’ directory is displayed.

Setting up the Member Directory Page.

Whenever you create a new member directory, a corresponding shortcode is also generated. The shortcode is provided so that you can easily add the directory to the page where you want it to be displayed.

To see the directory shortcode, navigate to ProfilePress > Member Directories, locate the member directory you want to display on the page and copy the provided shortcode.