How To Let WordPress Users Create Their Own Profiles in Your People Directory
A people directory is a great way for your site’s visitors to connect with professionals. But, adding and updating all the user profiles by yourself can be a lot of work. With Toolset, you can allow users to create their own public profiles without accessing your WordPress site’s backend.
There are many different ways you can use a people directory on your website. For example, a real estate agency might want to share a list of all their agents and the areas they cover. An art gallery could introduce the artists for an upcoming event and display their work.
No matter the type of website, a solid directory allows you to:
Showcase a list of professionals
Let visitors learn more about each professional
However, building a directory listing tens or hundreds of people isn’t the easiest task. Additionally, if you were to want each person’s public profile to display custom information, putting the directory together would be even more time-consuming. It would require you to gather each user’s personal information, add this information to the directory, and make updates to it whenever needed.
Giving all these users access to the backend admin area of your website and allowing them to create their own public profiles is an option, but it’s one you may not feel comfortable with.
Wouldn’t it be great if there was a way for WordPress users to create and manage their own public profiles from the front-end? With Toolset, they can.
What You’ll Learn
To create a people directory with public profiles that users can submit from the front-end, you’ll need to follow a multi-step process. Here’s what we’ll cover below:
- How WordPress Users Can Create Public Profiles with Toolset
- Step 1: Create a Form to Register New Users
- Step 2: Create the Custom Post Type and Fields
- Step 3: Create a Custom Archive Page with a Custom Search
- Step 4: Create the Post Forms
- Step 5: Create the Content Templates
- Wrapping Up
How WordPress Users Can Create Public Profiles with Toolset
WordPress itself offers many ways of displaying posts. You can choose to display all your posts on one page, specific posts based on their categories, or feature posts with the most comments. If your theme comes with an author info box, you can also show basic information from the author’s WordPress user profile with each post.
But what should you do if you want to display WordPress user profiles on the front-end and let your visitors search through them?
WordPress doesn’t have a template for displaying user profiles on the front-end, which means you can’t use Toolset to create a custom search for user profiles. However, there is something else you can do – let users submit their own public profile posts.
As you may remember from our courses, Toolset Forms allow users to create content from the front-end. This makes it possible for you to enhance your website with different types of user-generated content like articles, product listings, classifieds, and public profiles.
For this, you need to use Toolset Forms to create two separate forms:
- A form that registers WordPress users on your website
- A post form with custom fields for logged-in users
So, how exactly is the connection between WordPress user roles and post types made? Let’s look at the following image with an overview:
WordPress user profile
Post author of
WordPress post type
In WordPress, any user who creates and publishes a post from the site’s backend is automatically made the post author. With the post form, you’re giving your users a way to create, and become the authors of posts submitted through your site’s front-end.
Let’s break this down using our people directory as an example. The post form you create will probably have custom fields necessary to build a public profile, like Name, Image, Biography, and Contact Information. Once your logged-in user fills out the form fields and hits the submit button, Toolset converts the form content into a post – and makes the user the author of it. So, the user is now the author of their own public profile post.
Here, it’s worth noting that Toolset allows you to create account pages for front-end management. By creating another form for editing content, you can additionally make it possible for users to log in and manage their submitted public profiles at any time.
What You’ll Need to Do
Below, we’ll show you how to let logged–in users create and manage their own public profiles. To make the steps easier to follow, we created a directory site with dog walkers. Our goal is to let each dog walker submit their own public profile.
Step 1: Create a Form to Register New Users
To avoid giving users backend access to your website, you need to create a user registration form. This allows you to register new users from your site’s front end.
- In Toolset → User Forms, create a new form.
- In the Settings section, select the role of the user that the form will register and choose what happens after a user submits the form. For example, you can choose for users to see a message after submitting a form and customize the message content.
Once you’ve saved your form, you can use the Form block to insert the form into a page.
Hint #1 – Create a Login Form
Make sure that registered site users have a custom “My Account” page they can log in and add or edit entries from.
Step 2: Create the Custom Post Type and Fields
Now, you can begin thinking about what you want users to be able to submit. But before you can create a post form, you need to create a post type. This is because we need to have a post type to connect the form with.
In our example, we have a website that promotes dog walking services, so we’ve created a custom post type called Dog Walkers.
Your custom post type should have some custom fields for each user to add information about themselves. In our case, we want each dog walker to submit a public profile with basic information like their photo, a short description, experience, and location.
So, our Field Group for Dog Walkers includes:
- Number (price per hour, years of experience)
- Single line (short description)
- and Address custom fields.
Of course, you can adapt these custom fields to your own needs.
Step 3: Create a Custom Archive Page with a Custom Search
The more users submit their public profiles, the larger your people directory will be. Your website’s visitors should be able to easily scroll through the public profiles belonging to your post type. To make this possible, you can create a custom archive. Your site will look cleaner and you’ll make it easier for visitors to reach older public profiles.
To further customize your archive page and improve user experience, you can add a custom search. This way, visitors can quickly find exactly what they’re looking for. All they’ll need to do is filter through the public profiles in your directory by using the selection criteria.
Step 4: Create the Post Forms
Now, you need to allow your logged in users to add their public profiles to your directory through a front-end post form.
To do this:
- Go to Toolset → Post Forms and add a new form.
- Once you give the form a name, select the main form options. This includes selecting a post type, setting the status of the post created by the form, and adding the message users see after submitting the form.
- In the Form editor section of the Build Form tab, you should see all the repeatable custom fields assigned to your post type in the Form editor. You can delete or reorder any fields that don’t have a lock next to them. You can also add new fields by dragging and dropping the elements available under Extra elements and Generic fields.
- To display the form on the front-end, create or edit a post, page, or template. Then, insert the form into your post type using the Toolset Form block.
Hint #2 – Create a Form to Edit Content
Once you create a post form that will allow users to submit their content, you can create a separate one that allows users to edit any content they have submitted. Then, use the Toolset Form block to add it into a post or page. This way, users won’t need to rely on site owners or webmasters when they need to make changes to their profile.
Hint #3 – Set Access Permissions for Toolset Post Forms
You can use the Toolset Access plugin to make your post forms available only to logged-in users.
Step 5: Create the Content Templates
As the last step, you need to create a content template. This will allow you to display single public profile posts on the front-end.
For the purpose of our example, here’s how the content template displaying single Dog Walker profile posts looks like on the front-end.
A custom people directory can be a powerful asset. It allows your site’s visitors to browse through a list of professionals, find someone with the expertise they need, and even get in touch with the professionals of their choice.
With Toolset, you don’t need to spend days at a time creating public profiles. You also don’t need to give users access to your site’s backend. Instead, you can allow users to create and manage their own profiles by following a few steps:
- Create a user registration page
- Create a custom post type with custom fields that holds the public profiles
- Create a post form for logged-in users to add their own public profiles
- Create a content template for single-posts
Do you have a directory site? Did you know that you can use Toolset to allow users create their own profiles through the front-end? Let us know in the comments!
This article is a part of an ongoing series where we present interesting and powerful ideas of what you can build with Toolset. We’re publishing these every few weeks, so stay tuned!
Other articles in this series:
- How To Create a Custom WooCommerce Checkout Experience
- How To Create a Custom List of WordPress Pages
- 3 Tips For Creating Magazine-Like Layouts
- How to Build a Truly Custom WooCommerce Store
- 3 Non-Obvious Applications of Post Relationships in WordPress
- Design Beautiful Headers and Footers For Your Toolset Site
- How To Build A Custom Category Tree With Toolset
- 3 Dynamic Designs Using Kadence Blocks To Inspire Your Website
- 5 Advanced Uses of Toolset’s Conditional Block in WordPress