How to Create Your WordPress Custom User Profile Page in Frontend

WordPress allows you to add more users to your website, but it’s from the backend only. If you want to allow visitors to register and manage their accounts from the frontend, you might create a custom sign-up, sign-in, and user profile page for them. You also might create some fields for them to fill in their information. If you are using Meta Box plugin, you may use it to do it easily.

Table of Contents hide

1. Before Getting Started
2. Create Register Page
1. 2.1. Create Register Page with Default Fields
2. 2.2. Add More Fields to the Register Form
3. Create Login Page
4. Create the User Profile Page
5. Final Words

In this post, I’ll give you a way to create those pages and allow users to edit their account information from front end using Meta Box. Here we go!

Before Getting Started

We need the following plugins in this post:

Meta Box: This is the framework to create custom fields. It is free and available on wordpress.org.

MB User Profile: this is a premium extension of Meta Box. This plugin allows you to create fields for the user account and bring them to the frontend easily. This plugin is available in the Developer and Lifetime bundles from Meta Box.

Create Register Page

With Meta Box and its MB User Profile, creating a register page is quite easy.

However, before creating it, you should go to the Settings menu, then check the box Anyone can register in the Membership section.

Create Register Page

Create Register Page with Default Fields

MB User Profile automatically creates basic fields including Username, Email, Password, and Confirm Password. I meant they are the default fields. If you do not need more information from users when they sign up for an account, just follow this:

Go to the Page menu > Add New to create a new page and name it is Register Page. In the content section of the page, insert this shortcode:

[ mb_user_profile_register label_submit="Register" confirmation="Your account has been created successfully!" ]

Create Register Page with Default Fields

In there:

label_submit =”Register": means that you named the submit button as Register.
confirmation =”Your account has been created successfully!": means that you set the confirmation message as Your account has been created successfully!.

You may refer to other attributes which MB User Profile supports as below:

Name	Description
`id`	Meta Box ID(s), separated by commas. All fields from meta boxes will be included in the registration form. If not specified, it shows the default registration form.
`redirect`	Redirect URL, to which users will be redirected after a successful registration.
`form_id`	ID (HTML attribute) of the form.
`id_username`	ID (HTML attribute) of the username input field.
`id_email`	ID (HTML attribute) of the email input field.
`id_password`	ID (HTML attribute) of the password input field.
`id_password2`	ID (HTML attribute) of the confirmation password input field.
`id_submit`	ID (HTML attribute) of the submit button.
`label_username`	Label for the username input field.
`label_email`	Label for the email input field.
`label_password`	Label for the password input field.
`label_password2`	Label for the confirmation password input field
`label_submit`	Label for the submit button.
`confirmation`	Confirmation message if registration is successful.
`password_strength`	Set the required password strength. Available options: `strong`, `medium`, `weak`, `very-weak` or `false` to disable password strength meter.
`email_as_username`	Use email for username. If this param is `true`, then the username field will disappear.

I didn’t insert the ID of any meta box, so the registration form will show the default fields as below.

the register form shows the default fields

If you want to rename the fields, you may use some attributes such as label_username, label_email, label_password, label_password2.

Add More Fields to the Register Form

In case you want more information from users when they register an account, you should create a (or more) meta box including the wanted fields. There are two methods to create custom fields: code yourself or use intuitive UI from free Online Generator or premium Meta Box Builder extension from Meta Box.

Then, insert the ID of that meta box to the above shortcode.

For example, I have a field group that has ID as user-profile-default-fields.

Add More Fields to the Register Form

I inserted this ID to the above shortcode on the register page:

[ mb_user_profile_register id="user-profile-default-fields" label_submit="Register" confirmation="Your account has been created successfully!" ]

The Register Page will automatically display the new fields as follows:

The Register Page automatically displays the new fields

Create Login Page

A login page usually contains two fields which are Username (or Email) and Password. Both of them are automatically created by MB User Profile. You just need to use the below shortcode in the Login Page:

[ mb_user_profile_login label_submit="Login" label_remember="Remember your login" label_lost_password="Lost password?" ]

Create Login Page

The Login Page will show this:

The display of Login Page

Create the User Profile Page

I divide the fields into 3 types:

Password
Fields that WordPress has in default for User
Additional fields as you want

To show all the fields in 3 types to your User Profile page, we use a shortcode like the following:

[ mb_user_profile_info id="field-group-1, field-group-2, field-group-3" ]

In there, field-group-1, field-group-2, field-group-3 are the ID of the meta boxes which contain wanted fields. The IDs are separated by commas (,).

Show the Password Fields

The Password field is created automatically by MB User Profile with ID is rwmb-user-info. Just insert it to the above shortcode.

However, as the user’s routine and my opinion, we should make an individual page for these fields. It is where users can change the password as well.

So, I create a new page named Change Password and use the same shortcode with the User Profile page.

[ mb_user_profile_info id="rwmb-user-info" label_submit="Save Changes" confirmation="Your password was changed successfully!" ]

Create the User Profile Page

The Change Password page in frontend will be like this:

The Change Password page in frontend

Then, go back to the User Profile page and put this page’s URL there.

Display the Fields which WordPress Provides in Default

WordPress provides some fields for user profile in default as below:

Display the Fields which WordPress Provides in Default

If you want to show it on your User Profile page in the frontend, just follow these steps:

Create new custom fields (using Meta Box) corresponding with the default fields. It means that if you want to display three default fields which are First Name, Last Name, and Biographical Info, you need to create three new fields.
Display those new fields in the frontend using a shortcode.

Step 1: Create Fields Corresponding with the Default Fields

As you may know, there are three ways to create fields using Meta Box which is: coding, using Online Generator (free UI), and using Meta Box Builder (paid UI).

No matter which way you are using, you’ll get the same code and fields as the following:

function your_prefix_get_meta_box( $meta_boxes ) {
    $prefix = 'prefix-';

    $meta_boxes[] = array(
     'id' => 'user-profile-default-fields',
     'title' => esc_html__( 'User Profile Default Fields', 'metabox-online-generator' ),
     'type' => 'user',
     'fields' => array(
         array(
             'id' => $prefix . 'first_name',
             'type' => 'text',
             'name' => esc_html__( 'First Name', 'metabox-online-generator' ),
         ),
         array(
             'id' => $prefix . 'last_name',
             'type' => 'text',
             'name' => esc_html__( 'Last Name', 'metabox-online-generator' ),
         ),
         array(
             'id' => $prefix . 'biography',
             'type' => 'textarea',
             'name' => esc_html__( 'Textarea', 'metabox-online-generator' ),
         ),
     ),
    );

    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'your_prefix_get_meta_box' );

*Custom fields created by Meta Box Buidler (paid UI)*

Note:

You must set IDs of the new fields to be the same as the ones set by WordPress. For example, WordPress set the First Name field as first_name, so I set my field with the ID as first_name as well.

Step 2: Display Default Fields on the User Profile Page in Frontend

Get ID of the meta box (field group) which contains your created fields, then put it into the shortcode on the User Profile page.

In my case, my meta box ID is user-profile-default-fields.

*Get ID of the meta box created by Online Generator*

*Get ID of the meta box created by Meta Box Builder*

Put the ID into the shortcode on the User Profile page

You will see the fields display on the User Profile page in the frontend as below:

the fields display on the User Profile page in the frontend

You should test the field now. If the information you fill in these fields (in the frontend) is saved in the corresponding fields in your user profile in the backend, you made it right.

Create and Display Additional Fields

In case you need more information from users, you may create more fields apart from which are provided by WordPress in default with the same execution.

Create fields
Get Id of the meta box which contain fields
Put the ID into the shortcode on the User Profile page

However, you are free to set the IDs of the fields.

For example, I made a meta box with the ID that is user-profile-additional-fields as the following:

Create and Display Additional Fields

Then, put it into the shortcode:

put into the shortcode

Those fields will be displayed on the User Profile now:

the User Profile page

So, the User Profile page has been done now.

Final Words

To finalize all the forms, you should use more attributes provided by Meta Box here as well as style the fields for better display. For your quick reference, we have a tutorial for styling custom fields using CSS in this post.

We hope that with these tools and tutorials, you can easily make your own custom user profile page and get a lot of users. And note that you should use a transactional email service to notify your users after they successfully register an account on your site. That will help you become more professional.

We also have a series about adding Guest Author, which is quite similar to creating a user profile page so I guess you may also like it.

Cheers!