Adding Extra User Profile Fields in WordPress Admin

extra-profile-fields

Have you ever created a custom front-end Registration page or Profile page for your users in your website? One that involves adding extra user fields such as Facebook, Twitter, Skype, etc… ??

The problem with adding extra usermeta fields is it does not automatically register them to the admin users back-end, therefore if you were the admin and you want to edit the profile fields of a user, you might not be able to find the other meta fields from the user’s front-end profile since WordPress does not automatically create back-end fields for new user meta fields.

So today we are going to create a function containing the fields we want to register and then we will be hooking it into the admin profile editor page.

Ok for example we have user meta fields already available for us namely: gmail, yahoo and hotmail and these were part of your form fields when you created your custom registration page. Now we want the admin to be able to edit these 3 meta fields from the admin area, so we first create a form for the 3 fields:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function extra_profile_fields( $user ) { ?>
   
    <h3><?php _e('Extra User Details'); ?></h3>
    <table class="form-table">
        <tr>
            <th><label for="gmail">Gmail</label></th>
            <td>
            <input type="text" name="gmail" id="gmail" value="<?php echo esc_attr( get_the_author_meta( 'gmail', $user->ID ) ); ?>" class="regular-text" /><br />
            <span class="description">Enter your Gmail.</span>
            </td>
        </tr>
        <tr>
            <th><label for="yahoo">Yahoo</label></th>
            <td>
            <input type="text" name="yahoo" id="yahoo" value="<?php echo esc_attr( get_the_author_meta( 'yahoo', $user->ID ) ); ?>" class="regular-text" /><br />
            <span class="description">Enter a Yahoo Email.</span>
            </td>
        </tr>
        <tr>
            <th><label for="hotmail">Hotmail</label></th>
            <td>
            <input type="text" name="hotmail" id="hotmail" value="<?php echo esc_attr( get_the_author_meta( 'hotmail', $user->ID ) ); ?>" class="regular-text" /><br />
            <span class="description">Enter your Hotmail.</span>
            </td>
        </tr>
    </table>
<?php

}

// Then we hook the function to "show_user_profile" and "edit_user_profile"
add_action( 'show_user_profile', 'extra_profile_fields', 10 );
add_action( 'edit_user_profile', 'extra_profile_fields', 10 );

BTW, it’s in a Form structure so that we can have full control over the custom fields (like if you want to add some other labels or fancy designs)

Now for the saving part, we need to create a function that will hook to the save button of the user profile page, we use: “personal_options_update” and “edit_user_profile_update”

1
2
3
4
5
6
7
8
9
10
11
12
13
function save_extra_profile_fields( $user_id ) {

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

    /* Edit the following lines according to your set fields */
    update_usermeta( $user_id, 'gmail', $_POST['gmail'] );
    update_usermeta( $user_id, 'yahoo', $_POST['yahoo'] );
    update_usermeta( $user_id, 'hotmail', $_POST['hotmail'] );
}

add_action( 'personal_options_update', 'save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_profile_fields' );

Now the problem with the above code is all users will have these fields on their back-end profile. So if you are dealing with users with different roles and capabilities, you might not want them to have these fields. A quick fix to this is to use the current_user_can(); function of WordPress to prevent other roles from seeing these fields.

Just wrap your form with:

1
2
3
<?php if ( user_can( $user->ID, 'roles/capabilities') ): ?>
    // Your Form
<?php endif; ?>

Checkout my other WordPress Tutorials by following this LINK