Blog

How to Create Custom User Profile Page in WordPress

Create Custom User Profile Page with RegistrationMagic

When you own a membership site the custom user profile page is your key to retain users. Your users get to become active on your site, they can edit their data etc from these profiles. So make your site more engaging for your users with a custom user profile page.

Wouldn’t it be a treat for your users if they can have access to their account details and activities from the front end of your WordPress site? With custom user profile page, users can now login or out of their accounts without using the dashboard.

The WordPress register plugin, RegistrationMagic allows you to create a custom user profile page with its preset shortcode.

These user profiles of this plugin have login/log out options, user inbox, notifications, recent form submissions of that user. They can even know their payment history, reset password, purchases from the frontend without the help of the admin.

RegistrationMagic offers easy login options to enhance user navigation on your site. Refer to the Advance WordPress User Login Plugin Guide to know more.

Above all, the admin can choose the user data that they want to display on the custom user profile pages. Usually, your users land on their profile pages after logging in. Only the owner of the profile and the admin can edit the user details that appear on these profile pages

So, let us go ahead and start creating a custom user profile page with RegistrationMagic.

Getting the Shortcode from Form Dashboard

First, install the RegistrationMagic plugin on your site dashboard. After activating it, you will find the plugin menu on your menu panel. From there, click on the “All Forms” link.

This page will show you all the forms that you create with this plugin. RegistrationMagic offers several shortcodes to make many jobs easy for you. For example, every form cover will show its own unique shortcode. This shortcode will help you to publish a form on your site.

Tips: RegistrationMagic also offers a way to display WordPress form with HTML code. This way you can take control of the design etc. of the form by altering the preset HTML code.

As you hover on a form cover you will also find two links appearing at the two bottom corners. These are Fields and Dashboard. The Fields link will let you add custom user fields on your form. While the Dashboard link lets you take care of the WordPress form payment, security, analytics, automation etc.

As you land on the Dashboard page of the form you can see the registration feed and other form statistics. Now scroll down right to the “Publish” section. Then click on the “User Area” icon on the second row. This section will allow you to set up a custom user profile page on your site.

Copy Shortcode of Custom User Profile Page

The Publish section of the form has the shortcut to publish various pages on your site. From HTML code to a user directory page or login box you get several options.

Tips: You can publish a WordPress pop up form in every page of your site from here. The pop-up form appears as a small icon at the corner of the page. Thus it does not make your page look clumsy. In just one click this pop up gives your users access to forms and other custom pages or links of your choice.

Clicking on the “User Area” header displays a pop up with a shortcode. This shortcode allots a user specific area on your site. Using this shortcode you can create a custom user profile page in WordPress.

Now click on “Copy” from the link below. To sum up, this only completes a part of this tutorial where you extract the shortcode to publish a user profile on your site.

Publish Custom User Profile Page in WordPress

Go to Pages from your WordPress dashboard. Then click on “Add New” to create a new page where custom user profile page will appear. You are now on the screen with “Add New Page” as the heading. Give a unique title to your new page. In this case, we label the title “Custom User Profile”. So, this title will display on the front end of your WordPress site.

custom user area page publish page

Paste the shortcode copied from the “User Area” section of your form Dashboard on the content section of the page. You can also add media or image files to your page from this space.

Click on “Publish” placed on the right side of the screen. Your page is now published very simply with the help of this plugin’s shortcode. Click on “View Page” to see the front end view of the user profile page on your site. You can also use the link underlying your site title to see your custom user page.

custom user area page edit page

Front end View of the Custom User Profile Page

Your page named “Custom User Profile” is now visible on the front-end to the user. You can see the user profile image as it is a custom field on the registration form. The username appears in bold as the header of the profile. Other tabs include “Registrations”,” Inbox”, “Reset Password” and “Logout”. The welcome screen usually displays the Personal data of the user. If custom fields such as “First Name”, “Email” and “Nick Name” are part of the form then it appears on this page.

Tips: With RegistrationMagic you have a huge spread of custom fields to add to your registration form. You can add extra space, email field, country timezone etc on the form. For taking lengthy user data, more than a few words you can add a text field in WordPress form.

 

The “Registration” tab lists every form submission made by the user till date. It also specifies the exact time and date of form submissions. To show you, shared below is a screenshot displaying the list of successful “Registrations” with form name, submission date and time.

Further, the “Inbox” tab displays all the emails received by the user from your site after he/she became a member here.

To prevent violation of security the user can also change their passwords from time to time. From, the “Reset Password” tab the user gets the liberty to change passwords without having to notify the admin.

Finally, the last tab displayed on the custom user area page is the “Logout” tab. To sum up, users can have full control of their data and activity on your site. This way their data remains safe and the admin remains assured that the user data security stays in their own hands.

An All Rounder Plugin

The RegistrationMagic plugin not only creates dynamic forms for all purpose user registration but also creates a landing page for them. This landing page is functional and thus your users get this custom user profile. This way you can give the responsibility of your data to them only. Thus they do not trouble you for every password change or purchase detail issue. This gives an added security to user data.

Tips: You can make sure your users keep their profiles safer if you force strong password while user registration with RegistrationMagic forms.

From your office staff to gym or class members, this is how you can give a Custom User Profile Page after every form submission. Thus you add to the efficiency and user convenience on your site.

28 Comments

  1. Rams

    In the tab ‘personal details’ we can see the custom fields.’
    Imagine the field ‘Company’ being filled out.
    And now imagine the person wanting to change that field.

    How does one achieve this?

    1. RegistrationMagic Staff

      Unfortunately, a custom template cannot be created for the user area.

      To change/update the details on personal details page, you need to create a new from and bind each field on Personal details page to user meta. The option to bind user meta to a field can be enabled by editing the field > advanced settings > enabling: add this field to user account and filling in the user meta key for example: for first name key meta is “first_name”, for last name it is “last_name”, for website it is “url” and so on. You need to bind WordPress default user meta or custom user meta to the field by following similar steps.

      When the user submits the form with binded meta values, values on the backend and user area will update.

  2. Miracle

    Can edit the payment history tab and inbox tab to any other page that I want? And also can I add extra tab to the user profile page…..

    1. RegistrationMagic

      We will be adding few hooks to allow adding new tabs. This is under consideration and we will launch it in one of our upcoming versions.

      1. Nick Jones

        Hello, was this ever implemented? Or, am I able to overwrite the submissions with a page child version?

        1. rmagic

          There is a way to display RegistrationMagic user manager’s submission history in the ProfileGrid User profiles plugin, and add other tabs through Custom tab. We have yet to implement overwriting the user submissions with a page child version with RegistrationMagic.

  3. Waheed

    Is it possible like we can choose who is going to register on a website for example I am using for a sports page so I want to register as team, player or club. So there will be option to select and relevant form will appear for each type of user.

    1. RegistrationMagic

      You can create separate registration forms for team, player and club. Next, on a page you can add links and the user can choose the option about how they wish to register. Control shall be redirected to the specific page that of choice.

  4. Johnny Harfield

    Is it possible to leave out certain tabs from the user area? In this case it would be “Registrations” and “Payment History”.

    Thanks

    1. RegistrationMagic

      While with RegistrationMagic’s workflow, there is no option hide tabs, it can be achieved with integration of ProfileGrid plugin. Do note that with this integration, ProfileGrid’s profile page will replace RegistrationMagic’s submissions page.

  5. Praneeth K

    How to customize the User Profile Page?

    1. RegistrationMagic

      Could you please elaborate what customisation do you need on the user profile page in order to allow us analyse your requirement and assist you.

      1. Djimmy

        Hello,

        How we can customize the profil user page with different colors, polices, icon or new disposition ?

        And how we can give a different name for each form in form list of the user area ?
        All my forms are generated on the same form.
        For exemple, on your tuto you have Form1, int, int, int… It’s possible with the same form rename “int” to “intOfSubjectA”,”intOfSubjectB”,”intOfSubjectC” … ?

        Thanks

        1. RegistrationMagic

          We are unable to understand your requirement. Kindly elaborate it in detail in order to allow us assist you.

  6. Yashus

    Appreciate & Thanks for sharing your work for how to create custom user profile page in WordPress. I would implement for my client .

  7. Daniela Zavallone

    I like to have a profile page with ONLY personal details without all other information and tabs, how can I have that?

    1. RegistrationMagic

      The other tabs can be hidden using custom CSS. Please do write to us in case you require assistance with it.

  8. Amodha Galgamuwa

    Hi I need to add some more fields to my member profile front end. Can I extract more details from the form. Please help

    1. RegistrationMagic

      You can add as many fields as you require on the registration form. For more information about creating a basic form and adding fields to it, please refer to the following link: https://registrationmagic.com/create-wordpress-registration-page-starter-guide/

      1. Imie Sam

        Need to customize custom user profile page… Can I remove nickname field and customize payment field ?

        1. RegistrationMagic

          Currently the required customization is not possible. We have made a note of your requirement for review and analysis.

  9. Hart

    Is there a way you can style the user area? and also the personal details it not fully mobile responsive.

    1. RegistrationMagic

      You may use custom CSS to style the user area. Regarding the personal details not being fully responsive, it seems to be a conflict with the theme so could you please raise a support ticket here: https://metagauss.com/help-and-support/ in order to allow us analyze the reported issue at your end and provide you a speedy resolution.

  10. Hart

    Is there a way to style the user area? and also the personal details is not fully mobile friendly.

    1. RegistrationMagic

      You may use custom CSS to style the user area. Regarding the personal details not being fully responsive, it seems to be a conflict with the theme so could you please raise a support ticket here: https://metagauss.com/help-and-support/ in order to allow us analyze the reported issue at your end and provide you a speedy resolution.

  11. Francois

    Hola, quisiera que un usuario común se registre con sus datos y luego un colaborador que también esta registrado pueda validar unos datos del perfil del usuario. Sera posible ? Ademas cuando el usuario se esta registrando quisiera ademas qeu al finalizar de llenar los campos el botón lo lleve a otra pantalla para rellenar algunos datos adicionales. Esto se podría hacer?
    PD. tengo un plugin para generar codigo QR, al emplear el shortcod como podria asignarle el valor por ejemplo de su nombre y lo muestre?
    Gracias

    1. RegistrationMagic

      The user can register by submitting the registration form. The user account can be created but will be in deactivated state and the user will not be able to login until the collaborator(admin) activates it from the user manager. To achieve this go to RegistrationMagic > global settings > user accounts > in account activation method, choose deactivate user for manual approval > save it. Note that this is a feature of premium version of RegistrationMagic.

      Regarding redirecting user to another screen for filling additional data, you may create two pages in the registration form itself.

      We need to know which plugin are you using to generate QR code and kindly elaborate how exactly you wish to use RegistrationMagic.

  12. Shailendra

    Very valuable information, it is not at all blogs that we find this, congratulations I was looking for something like that and found it here.

Leave a Comment

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

shares