If you have a membership site of any kind, you probably have a number of engaged users that are slowly emerging as community leaders. Wouldn’t it be nice if you could highlight those members on your website? Or if you’re looking to create a community of professionals and let your website visitors get in touch with them. As it turns out, you can. Using the right tool, you can easily create and add a WordPress member directory to your website.
In this tutorial, we’ll show you how to use the Profile Builder plugin and its User Listing module to create a WordPress user directory and customize it to fit your project needs.
Why Create a WordPress Member Directory?
Adding a member directory to your WordPress website has several benefits.
Highlight Most Engaged Members
A great way to use a member directory is to highlight the most engaged members of your community. This allows potential members to see you have an engaged and active community. It also encourages other members to be more active so they can get featured in your directory.
Showcase Professionals in Your Area
There are many ways to create a membership site. One of them is to create a community of professionals in your area. This community can serve as a local support and collaboration network where members can meet and mingle with their peers. And with a member directory, you can easily showcase those professionals which then leads to the next two benefits below.
Allow Members to Contact Each Other
With a member directory, your members can contact each other. They can easily collaborate, get help or advice, and form professional relationships and friendships. This builds trust and loyalty between members. As a result, your community will get stronger which can help recruit new members.
Allow Visitors to Get in Touch With Your Members
Lastly, when you have a member directory, your website visitors can easily get in touch with your members. This allows them to hire them for their services without spending hours online looking for a trusted professional.
What to Look For in a WordPress Member Directory Plugin
When it comes to WordPress member directory plugins, there are a few key features you need to look for:
- The ability to choose which user roles to include in your directory — this allows you to create a granular and targeted list of members
- The ability to control how the user information is displayed on the front end — this gives you full control over what user profile information is displayed
- Search and filtering options — so visitors and members can search and sort through members
- Control over which user profile fields can be used for search — so your members and visitors can find members who meet a specific criteria
How to Set Up a WordPress Member Directory with Profile Builder Pro
Now that you know why you should create a WordPress member directory and what features to look for in a member directory plugin, let’s go through what you’ll need.
To set up a WordPress member directory, you’ll need the Pro license of the Profile Builder plugin and the User Listing module enabled.
Profile Builder Pro gives you the ability to create custom registration, login and edit profile forms and display them on the front-end of your website. It also allows you to add custom fields to your registration forms so you can create a detailed user profile for each of your members.
The User Listing module allows you to display a list of your members/registered users on the front-end of your WordPress website; essentially creating a WordPress member directory.
Steps to create a WordPress Member Directory
Let’s go through the steps of setting up a WordPress member directory on your site with the Profile Builder Pro and the User Listing module.
Install Profile Builder Pro
First things first: you’ll need to get the Profile Builder Pro plugin which includes the User Listing module.
Profile Builder Pro
Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.
Log in to your account area and download the plugin files. Be sure to copy your license number as you’ll need to enter after you have activated the plugin.
After you have downloaded the plugin files, go to your WordPress dashboard and navigate to Plugins → Add New. Press the Upload Plugin button and then locate the plugin folder you’ve downloaded on your computer.
Press the Install button and once the plugin is installed, click Activate. You can then enter your license number to register your copy of the plugin by going to Profile Builder → Register Version.
Create Form Pages
Creating form pages is easy. All you have to do is click on Profile Builder → Basic Information and you’ll see a notice with a button prompting you to create the form pages. Click the button and the plugin will automatically create them for you.
To view how each page looks, go to Pages and then select the page you want to view. As you can see from the screenshot below, the Profile Builder Pro plugin blends in seamlessly with your theme so your registration and login pages look on brand and match the rest of your site.
Setup Form Fields
Once you’ve set up the form pages for your site, you need to set up the form fields that you’ll use on the registration form. Profile Builder Pro comes with a number of fields already present but you can add more fields or delete the fields that aren’t relevant to you.
To set up form fields, go to Profile Builder → Form Fields. Here, you can add more fields by selecting a field from the drop-down menu and configuring its options. You can enter the field name along with a description to help users fill it out properly. You can also set the field as required or enable conditional logic on the field.
For example, you might want to add the Avatar field so they can upload their profile photo or a date picker field so they can enter their birthday. Or you might want to delete the nickname field.
In this example, I’ve added a text area field that allows users to enter their occupation.
Setting Up Redirects
Now that your form fields are set up, it’s a good idea to go through the redirects settings.
As you can see from the screenshot, there are a couple of different options here:
- Set up individual user redirects based on username or user ID
- Configure redirects based on user roles
- Create global redirects for all users
- Redirect default WordPress login and register pages to the ones created by the Profile Builder Pro plugin
This ensures that newly registered users are sent to the correct pages after they register or after they perform an action. You can create redirects after various actions:
- Editing a profile
- Logging into or logging out of your website
- Confirming their email
- Trying to access the dashboard
- Resetting their password
For example, you can use these settings to send newly registered users to their profile page so they can edit their profile. Or you can send them to a page that allows them to see other members. Another page where you can send them is to a special member’s area where they access content or resources exclusive to your members.
Activate the User Listing Module
Once your member profile information and the registration forms are set up correctly, it’s time to enable the feature that will allow you to create your user directory. Go to Profile Builder → Modules. Make sure that the User Listing module is active. If it’s not, check the Active option. Then press the Save Changes button.
Once you’ve activated the User Listing module, you’ll see a new menu under the Profile Builder tab. This menu allows you to create, manage, and edit multiple user listings and display them on the front-end of your website.
Creating and Configuring Front-end User Listings
To create a new user listing, go to Profile Builder → User Listing. Click Add New. You’ll then have a range of options for configuring your user listing. For starters, give your user listing a name.
Then, go through the settings option to configure the following:
- Roles to Display – this specifies which user roles will display on the front-end. If you don’t select a user role, it will default to existing roles. Keep in mind that if you’ve enabled the admin approval option, members will need to be approved to be seen in the directory.
- Numbers of Users/Page – set how many users display on each page
- Default Sorting Criteria – this setting controls how users are sorted in the directory. They can be sorted by any custom user fields and choosing Random will display users in any order.
- Default Sorting Order – set whether the users display in ascending or descending order
- Avatar Size – set the Avatar size in All-Userlisting and Single-Userlisting templates. By default, the plugin will pull the avatar image from Gravatar. As mentioned earlier, you can also add the Avatar field in your registration form if you want to allow users to upload their own profile photo.
- Visibility – with this, you can set the User Listing to be visible only to logged in users. Optionally, you can set which user roles can see the user listing Restrict the User Listing visibility to logged in users only.
It’s also worth mentioning that you can restrict the visibility of your member directory using the built-in Content Restriction feature in Profile Builder Pro plugin. You’ll find this option under Profile Builder → Settings → Content Restriction.
Check the box to enable it and then customize the type of restriction, redirect URL, and the messages that will display to logged-in and logged-out users.
Configuring Faceted Menus
You can also configure the options for the Faceted Menus that allow you to search users based on multiple options saved in user meta information:
- Label – this is the name for your faceted menu that will display on the front-end
- Facet Type – you can choose between checkboxes, select, range or search facet type.
- Facet Meta – lets you specify the meta field that will be used for the search option
- Behavior – if you’ve selected checkbox or select facet type, you can narrow or expand the options
- Visible Choices – if you selected checkboxes and select multiple facet types, you can choose how many options to display. If you don’t specify this, all options will be displayed.
This is where our custom field Occupation comes in handy. With this field, we can set up a faceted menu that lets other members or visitors to search your member directory based on members’ occupation or profession. The screenshot below shows you how this looks on the front-end:
Another option for configuring the user listing is to choose which fields will be used for the search functionality.
Editing User Listing Templates
The last step before adding your user listing as a WordPress member directory onto your website is to edit the user listing templates.
So, next, you’ll want to choose one of the 5 pre-designed templates for displaying your users. Just hover over the templates, click Preview to choose your favorite, and then hit Activate when you’ve made your decision.
The User Listing module has two templates: All-UserListing and Single-UserListing. Those templates are used to display all users and a single user respectively.
They can be edited to include the information you want so you can display your member directory exactly the way you want. Both of these templates are HTML templates. They might look intimidating but there’s a list of field tags for both these templates that you can add to each template to configure them to your liking.
When you pick one of the pre-designed templates, the HMTL code below updates accordingly. This means that you can now customize your theme by copying the tags you need from the right-hand side and pasting them into the code snippet on the left.
It’s worth mentioning that the All-UserListing template also includes Sort tags which allow you to specify how the users should be sorted.
As far as the Single-User Listing goes, I’ve included the Occupation field tag which will be visible on the individual user listing.
Displaying the WordPress Member Directory on the Front-End
Now that you’ve configured everything to your liking, the last step is to actually display your user listing on your website. First, publish the user listing you just created by hitting the Publish button.
The plugin will generate a shortcode that you can add to any page on your site to display your member directory. Copy the shortcode and then go to Pages → Add New. Give the page a name and add the content as usual. Then, paste the copied shortcode. After that, publish the page and then view it on the front end to ensure everything displays the way you want.
And with that, your member directory is live on your website which means you can now start accepting user registrations or directing your existing members to the directory where they can browse and get in touch with other members.
Create a WordPress Member Directory Today!
Creating a member directory on your website is not hard when you have the right tools to do it. You can use a member directory in lots of different ways to highlight your members.
With the steps laid out in this article, you’ll be well on your way to create a WordPress user directory and customize it to your liking. Get started today with Profile Builder Pro and its User Listing module. Good luck!
Profile Builder Pro
Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.
Source: https://www.cozmoslabs.com/346582-wordpress-member-directory-setup-and-customize/
