How to create a profile page in wordpress

Creating a profile page in WordPress is important for those who want to force users to register as a WordPress member. Therefore, in this course, we will learn how to create a profile page using a WordPress plugin as well as using php codes.

Before starting to create a profile page in WordPress, we will need to read the following steps:

1. Install the ACF Custom field plugin on your WordPress site
2. Create a member-account.php file in the WordPress theme folder
3. Create a WordPress page called User Profile
4. Create an author.php file in your WordPress theme folder

Steps to create a profile page in WordPress

1- Install the ACF Custom field plugin on your WordPress site

The purpose of this addition is to create custom fields that we will add to the user’s profile page so that he can enter his data, as well as create a form so that the user can fill in the data later after registering on the site.

Now go to the extension page on your site and create new custom fields give it any name you want, for example user profile . And create custom fields according to the data you want the member to fill in later. And do not forget to allocate the custom fields to the user form as shown in the following image.

Create a member-account.php file in the WordPress theme folder

Now you need to create a file for the user page (the profile page in the WordPress site) in order to show the data of the custom fields that the visitor filled in later in the form. In this file we will now need to write some php code, but here I will write the code based on what I created from custom fields and you can modify them if you read Add ACF Custom Fields WordPress Full Tutorial.

In the previous code, I showed the data that the user will fill in after registering on the WordPress site.

Create a WordPress page called User Profile

Now in the theme folder, create this page and go to the properties of this page, and set the page template you see as Member Account. Now each user has a private page called the personal user page.

Create a data control form on the User Profile page

Now we have prepared everything except that the user is not yet able to submit the form or control its data, so we will add a simple code to the previous page member-account.php before the last </div> tag. So we have the complete code.

 <?php /* * Template Name: Member Account */ ?>
 
<?php get_header(); ?>
<div class="container"> 
    <?php if ($attributes['show_title']) : ?>
        <h2><?php _e('Sign In', 'personalize-login'); ?></h2>
    <?php endif;  
    $current_user = wp_get_current_user(get_current_user_id());
    $user_info    = get_userdata($current_user->ID);
    $user_meta    = get_user_meta(get_current_user_id(), false);
    $username     = $user_info->user_login;
    $first_name   = $user_info->first_name;
    $last_name    = $user_info->last_name; 
    $birthday    = $user_info->birthday;
    $curauth = get_userdata(1);
    $description    = $user_info->description;
    $user_adresse    = $user_info->user_adresse;
    ?>



            <h1>  <?php echo $first_name .  '&nbsp;' . $last_name; ?>  </h1>
            <?php the_field('nationality', 'user_' . $current_user->ID); ?> | 
            <?php the_field('gender', 'user_' . $current_user->ID); ?>  
            <p> Site member from date     : <?php echo $user_info->user_registered; ?> </p>
            <p><?php echo $description; ?></p>
                        <ul>
                          <li><b><?php _e('Email', 'personalize-login'); ?></b>: <?php echo $user_info->user_email; ?></li>
                          <li><b><?php _e('  Adress', 'personalize-login'); ?></b>: <?php echo $user_adresse; ?></li>
                          <li><b><?php _e(' Display Name ', 'personalize-login'); ?></b>: <?php echo $user_info->display_name; ?></li>
                          <li><b><?php _e(' Birthday ', 'personalize-login'); ?></b>: <?php $current_user = wp_get_current_user(); ?>  
                            <?php the_field('birthday', 'user_' . $current_user->ID); ?>   </li>
                          <li><b><?php _e('Degree', 'personalize-login'); ?></b> : <?php the_field('study_degree', 'user_' . $current_user->ID); ?></li>
                          <li><b><?php _e(' Nationality', 'personalize-login'); ?></b>:  <?php the_field('nationality', 'user_' . $current_user->ID); ?></li>
                        </ul>

</div>
 
      <h4>You can now edit all your information from the form </h4>
            <?php acf_form_head();
            if (is_user_logged_in()) {
            $user = wp_get_current_user();
            $options = array(
            'field_groups' => ['43349'],
            'form_attributes' => array(
            'method' => 'POST',
             ),
            'html_before_fields' => sprintf(
            '<input type="hidden" name="action" value="adaptiveweb_save_profile_form">
            <input type="hidden" name="user_id" value="user_%s">',
            $user->ID
            ),
            'post_id' => "user_{$user->ID}",
            'form' => true,
            'html_submit_button' => '<button type="submit" class="btn btn-dark" value="Update Profile">تعديل الملف الشخصي</button>',
            );
            acf_form($options); 
            } else {
            ?>
              <?php 
              }?>
<?php get_footer(); ?>

In the next line is the number 43349 which is the ID of the custom fields you created in your WordPress plugin. See the picture to find out more about where to get this number.

'field_groups' => ['43349'], 

Create an author.php file in your WordPress theme folder

Now you need to create a page for you as an admin to follow the information that your users on the WordPress site will send without referring to you as an admin to the WordPress control panel.

After you created the previous file author.php, paste the following code and as I said earlier here I will write the code based on what I created from the custom fields and you can modify it if you read the ACF WordPress Add Custom Fields full tutorial.

<?php get_header(); ?>

    <?php
    $curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
    $description    = $user_info->description;
    $birthday=date('Y-m-d');
    ?>
<div class="container">

<h2> <?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?>  </h2>
  <p> <?php the_field('nationality', 'user_' . $current_user->ID); ?>Nationality/  
  Gender <?php echo $curauth->gender; ?>   </p> 
          <p><?php echo $curauth->description; ?>  </p> 
                  <ul>
                      <li> <b>   Gender </b>:    <?php echo $curauth->gender; ?></li>
                      <li><b>   Adress</b>: <?php echo $curauth->user_adresse; ?>  </li>
                       
                       <li><b> Email </b>:  <?php echo $curauth->user_email; ?></li>
                       <li><b>Display Name </b>:  <?php echo $curauth->display_name; ?></li>
                      <li><b>  Birthday  </b>: <?php $current_user = wp_get_current_user(); ?>   
                               <?php echo $curauth->birthday; ?>  </li>
                  <li><b> Degree  </b> :  <?php echo $curauth->study_degree; ?></li>
                  
                  <li><b>  Nationality</b>:   <?php echo $curauth->nationality; ?></li>
           
                  </ul>
</div>
<?php get_footer();?>

Brief explanation of creating a profile page in WordPress

The topic of creating a profile page in WordPress requires a simple experience of how to deal with php codes, as well as dealing with the ACF plugin in the WordPress site.

Useful Links :

• Explanation of adding ACF
• user Roles and Capabilities