How To Create A Custom Profile Page Using Ultimate Member?

We all know that we can create a login and registration functionality on any WordPress website. And most of us already leveraging its benefits. Yet, if you use the default WordPress registration features then you know that it doesn’t have a profile page in particular. So we use a variety of plugins to create a great looking front-end profile page. One of the best of them is, of course, the “Ultimate Member” plugin.The plugin creates a beautiful looking front-end profile page by default on installation and set-up. However, you may want to customize it further for more appealing look and to stand out from the others.

That’s what you are going to learn here in this post.

As you are reading this post, I assume that you have already installed the Ultimate Member plugin on your website. If not, you can install it by going to WordPress Dashboard > Plugins > Add New and enter “Ultimate Member” in the search box. Then click on install and activate the plugin and set it up as per your needs. You can find more on installing Ultimate Member from our guide.

Now let’s move on.

The default profile page gets created automatically while setting-up the plugin. Now you can either edit the default profile page by altering the default profile form or create a new one from the scratch.

Creating/Editing The Ultimate Member Profile Form

Whether you want to create a completely new custom profile form or edit the existing one, you need to navigate to your WordPress Dashboard > Ultimate Member > Forms

Now from here, if you want to edit the existing default profile form, hover over the form title which has “profile” in the ‘type’ column. On hover, it will display the “edit” option, click on it. (See the screenshot below)

However, if you would like to create a completely new custom profile form, just click on the “Add New” button on the same page above.

By using any of the options above, now you will land on the form builder page.

Here you can give any name or title for the form but you must choose the type as “Profile Form” to create the custom profile form that you want.

If you are editing the existing form, the basic form fields may already be there but if you are creating a new form then you must add the required fields by clicking on the “+” icon (the ‘Add Field’ button) inside the form builder.

The add field button will open a dialog box with a lot of form fields to choose from. You can select any of them as of your need and it will be inserted to the form. Here’s how the dialog box looks like and what are the existing fields available for you:

If you are editing existing form or you have already added some form fields to the form which cannot be used again then they will be greyed out as you can see on the screenshot above.

Now if you want to edit one of the existing form fields or the one you just added, you can click on the edit icon for the respective field. See the screenshot below:

As you can see in the above screenshots, I’ve added 3 extra fields to my profile page i.e., Website URL, Last Login and Registration Date as per my taste. Now let’s edit one of them.

I want to edit the registration date field. Let’s see what options do we get here.

You can see all the available options that I can alter, yet I just changed the label to “Joined Since” and added a user icon for the field and updated the form.

Now let’s see how does the new profile page look like on the front-end.

Of course, you can add more and more fields and customize them as per your need. I just showed you some example.

Now let’s see take it further and try the two-column structure.

Just click on the “two-column icon” from the column options and it will switch your single column design to a double column design. While switching all the existing form fields are adjusted/moved to the first column only. So you need to move them across both the columns.

To move them just drag and drop the fields to the columns where you want them to be.

For now, I added some more fields and adjusted them across both the columns. Now let’s see how this one looks like on the front-end.

So as you can see above, now it’s a two-column design. The gender field is not shown because I haven’t provided it while registering the account. So in such cases, Ultimate Member will use a blank space to cope up with that.

If you don’t want your users to leave any of the from field blank while registering then you must make those fields as required. If you don’t know how to do that, read this article which shows you how can customize your WordPress registration page using the Ultimate Member plugin.

Now let me show you what are the options that you can alter by clicking on the “Edit Row” icon/button.

As shown on the screenshot above, you can customize a lot of CSS options for the rows of the form.

Also, if you use multiple rows, don’t forget that as per your need, you can move them too.

When you are done with adding the fields, editing the options available and the CSS settings. Just click on the “Create/Update” button to publish the form.

Once you publish the form it will automatically reflect on the profile page if you edited the default form. And if you created a completely new form then you have to copy and paste the shortcode of the form to the page, post or widget area. Wherever you want to display the profile details.

So that was it. Now go ahead and customize your own. If you would like to like to learn more ways of customizing Ultimate Member, you can check out these other posts:

How to customize Ultimate Member Profile Menu Dropdown

How to customize Ultimate Member templates