How to create WordPress user profile pages where users can edit their details

In today’s article, we are going to extend the WordPress user profiles by creating front-end editable profile pages. There are many different ways to build a website with user accounts with WordPress, ranging from various plugins to using custom code. In this article we are going to focus on the Ultimate Member plugin, since it is one of the easiest to use. Just by following a few simple steps, we are going to allow our users to edit their profiles on the front-end, without having to access the admin dashboard. In this way we’ll be able to create a wide range of new custom fields and grant users access to edit them.

The Ultimate Member plugin allows you to create a social network and membership site, by creating different WordPress user profile pages and allowing them to connect with other users. A membership site is a great way to allow users to have access to a custom profile. It’s also a great tool for you to get to know your users better. When using the Ultimate Member user profile plugin for a membership site, you can also create different access levels to content and offers.

Ultimate Member also provides various privacy settings, which can allow you to make your user profile pages visible only to their owners. So, if you don’t need the membership side of the plugin, but you need to provide your users an easy way to edit their details, you can still use Ultimate Member for that. This is a great solution, since you can allow front-end user profile access, with no backend access. Additionally, this reinforces your branding, as users never feel like they are leaving your site to access the admin section.

We are also going to check how you can search through these newly added custom fields by using Users Insights. In this way you’ll be able to not only create profile edit pages, but also see how these profiles are being used.

These are the main topics for today:

  • Ultimate Member user profile features
  • Creating a user profile form with Ultimate Member
  • Creating the WordPress user profile page
  • Making the user profile pages private
  • List and search the user profile custom fields

Let’s get right into it!

Ultimate Member user profile features

Ultimate Member membership plugin

Once you install and activate the Ultimate Member plugin, your WordPress site is going to be turned into a membership site. The most prominent features include WordPress user profile on the frontend, frontend user registration, user profile with custom fields, custom user roles and a form builder.

Additionally, there are the content restrictions, members directory and conditional loading features. For example, we can hide content, widgets or menus based on the current user access level.

The Ultimate Member plugin also introduces many different shortcodes, some of which you can use to create custom WordPress public user profile pages. And that’s the side that we’re going to explore today. Let’s create our first user profile form now.

Creating a user profile form with Ultimate Member

Under Ultimate Member > Forms you can create and edit your user registration, login and profile forms. We can use it to allow our WordPress users to edit their profile on the frontend. Now let’s start by creating a new form. Having multiple forms is useful if each user type has a role or a set of custom fields. For example, you can have different profile for different user types or occupations.

Custom forms for Ultimate Member

The form creation screen is composed of many fields. Let’s add some fields. In case you haven’t registered your desired custom user fields, you can do that when adding them to a form. For example, if we want to know the primary programming language of our developers, that can be stored in a custom field. From the profile registration, you can click on the “add new” field:New custom profile form

Then select the field type – in our example, it could be a radio or dropdown field:

Custom fiel type

Next let’s add all of the field details. There are various options that Ultimate Member makes available. All of the options are clearly explained when you hover on the question mark icon. Some of the most important fields that you should pay attention to are:

  • Meta Key – the Ultimate Member user profile data is stored as user meta. You need to carefully choose a unique descriptive meta key that is going to store the data of this field, as you won’t be able to change it once the field is created.
  • Visibility – setting whether this field will be available in the view profile, edit profile or both pages
  • Privacy – in this field you can set who is going to have access to the field. Fields containing sensitive personal data, such as a phone number or address, should be set with a higher privacy, such as visible to owners and admins only.

Main Programming Language custom field

After you create the field, you just need to repeat this process for all your desired fields, be it custom or default fields.

It’s also possible to edit the entire form options. For example, you can make a form role-specific, change its template, colors, size, alignment. All the design options of a form can be customized, so each form can be unique. This can be done by enabling the “Apply custom settings to this form” field in the sidebar:

Ultimate Member customize registration form

This is the final setup of our form. Since it’s a custom form for profile edit you don’t need to add all your user fields. In fact, you can add just one custom field if you want to, in case it’s an essential information for you.

There’s just one missing piece in our WordPress user profile, which is displaying our form. Let’s do that now.

 

Creating the WordPress user profile page

After you create the form, a shortcode will be generated for it. To create our WordPress user profile page, we’ll create a regular page and insert our shortcode. We’ll also need to set that page as our profile page under Ultimate Member > Settings > General > User page. In this way your profile will be editable. Then just publish this page:

New page adding UM profile shortcode

And set it as your user page, it is going to display our custom profile:

Edit WordPress user profile

You can use the same technique to create multiple WordPress user profiles edit screens in front end. If you have multiple user roles, or even if you want to collect different data from different users, that’s the easiest way to do it.

Our users are able to edit their custom fields now. And we can see if they are using their frontend profile form by checking their profiles. Therefore, once a user have their programming language field, this is how this information is displayed when you check their Ultimate Member profile page:

View WordPress user profile

But checking each of our users manually may be too much work. That’s why we’re going to use the Users Insights plugin. Later in this article we’ll show you how you can search and filter your WordPress users based on their profile fields. But first, let’s talk about data privacy.

Making the user profile pages private

Since Ultimate Member is a membership plugin, it makes some of the user pages public by default. This includes user profile pages and members directories. If you need to keep the profile pages private to the owners and the admins, you would need to configure the Ultimate Member privacy settings.

Disable Members Directory

Ultimate Member by default creates a members directory that lists all the available members. To disable the members directory, go to Ultimate Member > Settings > General > Users and uncheck the “Enable Members Directory” option.

Limit profile page access

The next thing that we need to do is limit access to the user profile page. This requires changing a couple of settings.

First, open the user profile page in edit mode and navigate to the “UM Content Restriction” section. In this section, you should see a “Restrict access to this content” option. Check this option and then in the “Who can access this content” field that will get displayed below, select the “Logged in users” option. This will restrict access to this page to the logged in users only – the site visitors will not be able to access the content of this page.

Next, we need to also restrict the access to this page based on user roles. To do this, go to Ultimate Member > User Roles. Then you have to edit each role that will not be allowed to access the user profile page of other users. To restrict access, you just need to disable the “Can view other member profiles” option.

Filter and display user profile custom fields

The first step in filtering custom fields in Users Insights is enabling the Ultimate Member module. You can do that under Users Insights > Module Options:

Activate Ultimate Member module for Users Insights

By doing that you should immediately see the custom fields you’ve created both in the filters and in your columns:

Ultimate Member fields to filter users

It means that you can filter your users based on this data – or the lack of it. Since our programming language is a dropdown type field, we can filter our users who have this field filled, or by one of the options. For example, you can filter all PHP developers:

Filtering all PHP developers

It’s also possible to filter all users who have logged in, but haven’t filled any of our newly created fields. This way you can get in touch with them via email to send the new profile edit page:

Filtering user who haven't filled custom WordPress profile

Exporting these users is going to give you a CSV file that you can use in external software such as MailChimp or Excel. Now the sky is the limit for you. You can filter, group and export your users and their custom fields using Users Insights.

Creating reports from the user profile data

In addition to the power of individual user reports, we may benefit from quantitative reports as well. This is particularly interesting if you want to get the whole picture and check some general aspects of your user base. That’s when the Reports section is important.

In it, you see the aggregate results for each of your data points. Therefore, you can quickly see and compare different user responses for their profiles. Reports can be a good starting point if you don’t know your customer base yet. From there you get the big picture and it can sparkle interesting questions.

Since all Ultimate Member activity and profile fields data is used, we can quickly check our new profile results. For example, drop down fields such as the main programming language or freelancing activities are shown with all options. In addition, when checking the reports you can quickly exclude unwanted values, and check only the relevant ones for you.

Ultimate Member drop-down field report

Ultimate Member exclude pie chart values

 

In the example above we can see how excluding a value can change our perceptions. The first scenario all items seemed to have the same values. Then we hide one of them and we can clearly see a trend towards part-time freelancing.

The dropdown fields have an exclusive aspect. You can’t select two at the same time. Hence, when it comes to data presentation a pie-chart is the best option. On the other hand, we could have multi-select fields. For these, we have a bar-chart display.

This is a quick way to find the most popular answers for some of your questions, regardless of user percentage. Here are some examples:

Ultimate Member multi-select field report

Ultimate Member multi-select field chart

 

To summarize, the reports are a great way to check your user profiles. They can give you insights on what to look into and what to expect from your users. In addition, the can be a great starting point for deeper investigations, using the smart filters and checking multiple factors.

Conclusion

Today we looked into how you can use the Ultimate Member plugin to create custom WordPress user profile pages. These pages can be used for custom user field edits, by creating segmented forms for each user type. We also learned how to display these forms in the frontend, and how to later filter your users based on this data. By the end of the day you should be able to create your user profile edit forms.

We hope you enjoyed this article, and see you again next time!