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

Create Register Page with Default Fields

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:

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 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 is user-profile-default-fields.

Add More Fields to the Register Form

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:

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:

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

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 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)
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 Online Generator
Get ID of the meta box created by Meta Box Builder
Get ID of the meta box created by Meta Box Builder
Put the ID into the shortcode in User Profile page
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:

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 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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

grid gear info copy caret-up caret-down trash