How to Add Extra Fields to the WordPress Registration Form (Without Plugin)

WordPress, by default, includes basic fields like username, email, and password during user registration. However, you might have specific requirements for collecting additional information from users. Adding extra fields to the ‘Add New User’ form enables you to gather data tailored to your needs, such as user address, phone number, or other relevant details.

Thankfully, WordPress offers several methods to achieve this, from using plugins to manually coding custom solutions. In this guide, we will focus on a custom coding approach, ensuring that your website’s performance remains unaffected by additional plugins.

This method allows you to seamlessly integrate extra fields into the user registration process, tailoring the ‘Add New User’ form to your unique requirements. Once the user is created, you will also be able to view and edit the values of these extra fields on the user edit page.

Adding Extra Fields to the ‘Add New User’ Form in WordPress

Step 1: Preparing the Extra Fields

Fields Naming

First, take a moment to determine the specific information you want to collect through the extra fields. This will help you choose appropriate names and ensure the fields meet your needs.

For this example, let’s add an Address field, a Phone Number field, and a Date of Birth field to the ‘Add New User’ page. By doing so, you’ll be able to associate each user with their address, phone number, and birthdate, providing a more complete and personalized user profile.

Get the Fields Inside an Array

Since we’ll be adding the extra fields without relying on any plugins, we’ll incorporate custom code directly into your WordPress website. Adding numerous fields individually can be tedious and result in lengthy code. Instead, we’ll simplify the process by using iteration.

We’ll create an array containing the extra fields and then use a loop to generate the necessary code for each field. This approach keeps your code clean and efficient. Let’s start by preparing the array with the fields you need!

$wpp_custom_fields = array(
    'address' => array(
    'label' => 'Address',
    'type' => 'text',
    'description' => 'Enter your complete address.',
  ),
    'phone' => array(
    'label' => 'Phone Number',
    'type' => 'tel', // Phone input type
  ),
    'dob' => array(
    'label' => 'Date of Birth',
    'type' => 'date',
  ),
  //add more fields here
);

The snippet above creates the $wpp_custom_fields array and includes an address field labeled ‘Address’ with the description ‘Enter your complete address,’ a phone field labeled ‘Phone Number’, and a dob field labeled ‘Date of Birth.’

You can easily customize this array or add more fields. Simply follow the format provided and add your fields after the //add more fields here comment. Feel free to tailor the fields to suit your specific needs!

  'myfield' => array(
  'label' => 'My Field Label', // The field label
  'type' => 'text', // The field input type, can be text, tel, date, and some other type.
  //'description' => 'My field description.',
),

Remove the double slash on ‘description’ if you want to add a description for your field.

Step 2: Preparing the Custom Code

Once your array is ready, the next step is to add it to the custom code provided below. Simply place your array after the //place your array here comment.

 //place your array here

// Add custom fields to user registration form
add_action( 'user_new_form', 'wpp_custom_fields' );
function wpp_custom_fields() {
  global $wpp_custom_fields;

  foreach ($wpp_custom_fields as $key => $field) {
    $label = $field['label'];
    $type = $field['type'] ?? 'text'; // Set default type to 'text'
    $description = $field['description'] ?? '';
    ?>
    <table class="form-table">
      <tr>
      <th><label for="<?php echo esc_attr($key); ?>"><?php echo $label; ?></label></th>
      <td>
        <input type="<?php echo esc_attr($type); ?>" name="<?php echo esc_attr($key); ?>" id="<?php echo esc_attr($key); ?>" class="regular-text" value="<?php if ( isset( $_POST[$key] ) ) echo esc_attr( $_POST[$key] ); ?>">
        <?php if ($description): ?>
        <span class="description"><?php echo $description; ?></span>
        <?php endif; ?>
      </td>
      </tr>
    </table>
    <?php
  }
}

// Save custom fields on user registration
add_action( 'user_register', 'wpp_save_custom_fields', 10, 1 );
function wpp_save_custom_fields( $user_id ) {
  global $wpp_custom_fields;

  foreach ($wpp_custom_fields as $key => $value) {
    if ( isset( $_POST[$key] ) ) {
      update_user_meta( $user_id, $key, sanitize_text_field( $_POST[$key] ) );
    }
  }
}

// Add custom fields to user edit screen
add_action( 'edit_user_profile', 'wpp_edit_custom_fields' );
function wpp_edit_custom_fields( $profileuser ) {
  global $wpp_custom_fields;

  foreach ($wpp_custom_fields as $key => $field) {
    $label = $field['label'];
    $type = $field['type'] ?? 'text';
    $address = get_user_meta( $profileuser->ID, $key, true );
    ?>
    <table class="form-table">
      <tr>
        <th><label for="<?php echo esc_attr($key); ?>"><?php echo $label; ?></label></th>
        <td>
          <input type="<?php echo esc_attr($type); ?>" name="<?php echo esc_attr($key); ?>" id="<?php echo esc_attr($key); ?>" class="regular-text" value="<?php echo esc_attr( $address ); ?>">
        </td>
      </tr>
    </table>
    <?php
  }
}

// Update custom fields on user edit
add_action( 'personal_options_update', 'wpp_update_custom_fields' );
add_action( 'edit_user_profile_update', 'wpp_update_custom_fields' );
function wpp_update_custom_fields( $user_id ) {
  global $wpp_custom_fields;

  if ( !current_user_can( 'edit_user', $user_id ) ) return;

  foreach ($wpp_custom_fields as $key => $value) {
    if ( isset( $_POST[$key] ) ) {
      update_user_meta( $user_id, $key, sanitize_text_field( $_POST[$key] ) );
    }
  }
}

The code above will manage all the extra fields you’ve added to the array. It handles the display and saving of these fields on both the ‘Add New User’ and ‘Edit User’ pages. This means you’ll be able to view and edit the values of your extra fields on the user edit page, ensuring a smooth and efficient user management experience.

Step 3: Incorporate the Custom Code

Once the code is ready, it’s time to integrate the code into your WordPress website. The most straightforward method is to add the code to the functions.php file of your currently active theme. Alternatively, consider safer methods like using a child theme or creating a custom plugin.

To add the code to the functions.php file, navigate to Appearance → Theme File Editor in your WordPress dashboard (For block themes, locate the Theme File Editor in the Tools menu.). From there, select the functions.php file from the list of theme files and copy the code to the bottom of the file, then click the Update File button to apply the changes.

Step 4: Add a New User

Once you’ve completed all the previous steps, you can begin creating new users and adding additional information using the extra fields.

If you need to edit the values of these fields or simply view the information for a specific user, you can do so easily by editing the user from the user page, just like you normally would.

The Bottom Line

By following this guide, you can effectively customize the ‘Add New User’ form to collect the specific information you need, all while maintaining optimal website performance. This custom coding approach not only enhances the user registration process but also ensures that you have full control over the data collected, providing a more tailored and efficient user management system.