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.

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

Before Getting Started

We need these 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 allow you to create fields for the user account and bring them to the frontend easily. This plugin is available in every bundle 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 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 the user when they sign up 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!"]

In there:

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

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

NameDescription idMeta 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. redirectRedirect URL, to which users will be redirected after successful registration. form_idID (HTML attribute) of the form. id_usernameID (HTML attribute) of the username input field. id_emailID (HTML attribute) of the email input field. id_passwordID (HTML attribute) of the password input field. id_password2ID (HTML attribute) of the confirmation password input field. id_submitID (HTML attribute) of the submit button. label_usernameLabel for the username input field. label_emailLabel for the email input field. label_passwordLabel for the password input field. label_password2Label for the confirmation password input field label_submitLabel for the submit button. confirmationConfirmation message if registration is successful. password_strengthSet the required password strength. Available options: strong, medium, weak, very-weak or false to disable password strength meter. email_as_usernameUse 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 register form will show the default fields as below.

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 user when they register an account, you should create a (or more) meta box including the wanted fields. Then, insert the ID of that meta box to the above shortcode.

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

I inserted this ID to the above shortcode in 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 following:

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?"]

The Login Page will show this:

Create the User Profile Page

I divide the fields into 3 types:

1. Password
2. Fields that WordPress has in default for User
3. Additional fields as you want

To show all the fields in 3 types to your User Profile page, we use a shortcode as 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!"]

The Change Password page in frontend will be like this:

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:

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

1. 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.
2. 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 are: coding, using Online Generator (free UI), and using Meta Box Builder (paid UI).

No matter what 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' ),
        'post_types' => array('post', 'page' ),
        'context' => 'advanced',
        'priority' => 'default',
        'autosave' => 'true',
        '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 be the same as the ones set by Wordpress. For example, Wordpress set the First Name field is first_name, so I set my field with the ID is 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 in User Profile page

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

You should test the field now. If the information you fill in these fields (in 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 that you need more information from users, you may create more fields apart from which are provided by Wordpress in default with the same execution.

1. Create fields
2. Get Id of the meta box which contain fields
3. Put the ID into the shortcode in the User Profile page

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

For example, I made a meta bõ ưith the ID is user-profile-additional-fields as the following:

Then, put it into the shortcode:

Those fields will be displayed on the User Profile now:

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. Cheers!

— — —

The official publication at Meta Box.