Whether you need a member directory, a staff listing, student and teachers directory, a patient platform, or anything in between, having an easy way to display your userbase on your site would really come in handy, right? A WordPress user listing on your site gives your users the ability to see each other, along with some personal information, making it easier for them to connect and learn about the community they are a part of.

In this blog post, I’m going to walk you through the process of creating a WordPress user listing for your site, with the help of a user-friendly plugin. The aim is to have a place on the front end of your site that displays all (or some of) the users on the site, in order to grow a community around your brand.

By the end of this tutorial, you should be able to create something that looks like this, no code required, just a couple of clicks and an extremely easy-to-use user profile plugin:

Preview of WordPress user listing

But first, let’s go over the reasons why you would need to display your user base on the front end of your site.

Why Would You Need to List Your Userbase?

Well, listing the users of a website is a pretty common thing to do, and there can be lots of reasons why this functionality would bring a lot of value. Here are some examples:

  • If you own a forum or an online community, having your userbase displayed is a great way to allow members to contact each other easily;
  • If you run a membership site, you could list your premium users to highlight their contribution;
  • At the same time, if you want an easy way to monetize your membership site, creating a member directory of professionals from a certain niche is another good way to do it. For example, you could create a platform for people looking for the best photographers in their area and charge photographers a fee to display them on your list;
  • You could also create a team page for your business, where you bring attention to the professionals in your company;
  • As an eCommerce business owner, you might want to have a list of your customers;
  • You might own an educational platform where you’d like to list your teachers, students, and staff;
  • Or you might even manage a medical platform where a list of all the medical professionals is essential.

But regardless of your motives, WordPress makes it easy for you to achieve this. Because, as you’re already accustomed, there’s always a plugin to help you with your needs.

So, without further ado, let’s get into the tutorial!

How to Set Up WordPress User Listing on Your Site

The easiest way to achieve your WordPress user listing is by using, you guessed it, a plugin.

In this article, I’m going to use the Profile Builder plugin to walk you through the steps of creating a list of users. Profile Builder is a complete user management solution, so using it for this task will give you an advantage in other user-related areas as well. For example, you might also need to create custom user roles or restrict certain pages or content from non-logged-in users.

But let’s focus on user listing for now. So, if you’re looking to list your userbase on your site, here are the easy steps you need to take:

1. Install & Set Up Profile Builder

First things first, let’s get the Profile Builder plugin on your site.

Profile Builder Pro

The easy way to manage user-related functionalities on your WordPress site.

Get Profile Builder

Choose your preferred plan and, after purchase, download your copy of the plugin from your Account page.

Cozmoslabs Account Page

Download both the main plugin and the pro version and upload these archives to your site one by one. Do this by clicking Plugins → Add New, and then hit the Upload Plugin button at the top. Choose your files and hit Install Now.

Adding a new plugin

Don’t forget to Activate your plugins after installation.

2. Create a Registration Form

When you install the Profile Builder plugin, some core pages are automatically created for you. This means that your registration page has probably already been created. All that’s left is customizing it to your liking. In other words, populate it with the fields you specifically want to include in the registration form.

So, to customize the form, go to Profile Builder → Form Fields.

Managing Profile Builder form fields

Here, you’ll see some default fields the plugin has already added. But don’t worry, you can add lots of new fields and even remove some that you don’t need.

Click the Select an option drop-down and look through the list of fields you can choose from. Pick your desired fields one by one and customize them as you wish before clicking the Add Field button.

Choosing form fields

The point here is to add the fields that are relevant to your member directory. So, for example, if you’re creating a staff directory, you might want to ask registrants to input their occupation and contact information.

To see your new registration form you can go to Pages → All Pages, identify the pre-created registration page, and click the View button that appears on hover.

Identifying the pre-made Profile Builder registration page

If you can’t find the pre-made registration page, you can always create a new one by copying the registration shortcode from the Form Fields page and pasting it onto a blank page.

Profile Builder registration shortcode

This is how your registration page should now look like:

Registration page

Now, of course, your registration page should contain the fields that are useful for you and your user listing.

3. Create a WordPress User Listing

Basic Setup

In order to create the list of users, you’ll need to enable the User Listing add-on. Do this by navigating to Profile Builder → Add-ons. Scroll to find the add-on and click the Activate button to its right.

Activating WordPress User Listing add-on

Now, you should be able to see a new menu item titled User Listing under Profile Builder in your WordPress dashboard. Click on it and you’ll be prompted to create a new user listing.

Click the Add New button at the top to start editing your first list.

Editing WordPress user listing

Once you give your user listing a title, the first section you’ll see is where you’ll set up your basic settings. Here, you can choose which user roles to include, and how they’re going to be displayed in the user listing. You can even choose to hide the user listing from non-logged-in users so that only your members can see each other.

User listing visibility

Adding Filters

The next section you’ll see is the Faceted Menus. Here, you can choose what filters will be available on your user listing page. For example, you could allow your site visitors to filter the userbase by location, role, age, or anything else you might need.

In my example, I’m going to add a filter to sort users by their occupation. I’m putting “Occupation” as the Label I want to display on the page, choosing Checkboxes as the Facet Type—since I want people to be able to select multiple options simultaneously—, and choosing the Role field as a source for the filter (or Facet Meta). I will not be inputting anything in the Visible choices field since I want all the roles to be included. Once it’s all done, let’s click Add Entry.

Adding filters to WordPress user listing

Now you can repeat the same steps for adding as many filters as you want.

Here’s what your filters should look like once added:

Filters for user listing

And here’s how your filters should look like on your user listing page on the front end:

User listing filter preview

Once a user clicks on the Filters button, the filter fields you’ve added will be displayed right beneath.

Next, you can choose how the search function works. Do this by selecting which information you want to be scanned when a visitor searches for a keyword in the search bar:

Setting up search fields for WordPress user listing

Customize WordPress User Listing – Choosing a Template

Now to the fun part, design and customization!

In the next section, you’ll be able to choose one of the 5 pre-designed themes for your user listing page, just like this one:

WordPress user listing template preview

Profile Builder offers you one default theme and 4 custom ones. When you hover your mouse over one of the available themes, you’ll see a button to Preview the theme, and one to Activate it.

WordPress user listing templates

Pick the one that best suits your website design. But don’t worry, you’ll be able to customize it even further.

With your template chosen, it’s now time to customize the user information you want to be displayed on the front end. If you’re ok with the fields your chosen template displays by default, you can just leave everything as is. But if you want to add or remove information, here’s how to do so.

When you activate a theme, the HTML for both the single user and the all-users page is automatically updated with the new styling.

This means that by using the tags on the right side of the template code you’ll be able to furthermore customize the content that will be displayed in your user listing. All you have to do is copy and paste the tags you want.

In my example, I’d like to replace the Nickname field in the single user page with the Address. So, all I have to do is copy the address label and tag from the right, and paste it on the left, replacing the Nickname field.

Editing the user listing template

Browse the tag list and see what information is relevant to your users and your own user listing page.

Note! Make sure to ask for that specific information in the registration form, so that users will provide you with the information you want to display in your user listing right from the start. For example, if you want to include a phone number field in the user listing, you should also have a phone number field in the registration form.

Reset WordPress User Listing to Default Settings

Now, because mistakes can happen, especially when a lot of customization is on the table, the plugin also lets you restore your user listing to its default settings.

So, if something goes wrong along the way, you can simply go back to the templates section and hover over the active theme. You’ll see that a Reset Data button is now available here:

Reset user listing data button

Once you click that button, you’ll be able to select which setting you want to reset. You can choose to reset the general Userlisting Settings, the All-userlisting Template, the Single-userlisting Template, or even all of the theme data.

Resting user listing template to default

Publishing the WordPress User Listing

When you’re happy with your customizations, don’t forget to hit the Publish button at the top. This will generate a shortcode for your user listing, that you can paste on any page on your site.

Publishing the WordPress user listing

So, with my customizations in place, this is how my user listing page looks now, once I pasted my shortcode onto a blank page:

User listing page on WordPress site

And once I click on a certain user, this is how the single user page looks like:

Single user page on WordPress site

Set Up WordPress User Listing Today

So, whether you need a member directory, staff listing, student and teachers directory, patient files, or any other type of way to list your userbase, you now know the easiest way to achieve it.

Apart from making it extremely easy to list your users, Profile Builder is actually a complete user management plugin that gives you lots of other functionalities. You can add, edit or remove user roles, create login, account, lost password, and other important user-related pages, restrict content based on user roles, and much more.

If you want to try it for free, you can download Profile Builder from the WordPress repository. But if you want the full package, including the user listing templates, give the premium version a spin and get your website to a new level.

Profile Builder Pro

The easy way to manage user-related functionalities on your WordPress site.

Get Profile Builder

Do you have any questions on how to create your own WordPress user listing? Ask them in the comments section below!

Source: https://www.cozmoslabs.com/515090-wordpress-user-listing-2/

You might also like this video

Leave a Reply