PressTigers
How to Add Custom User Profile Fields in WordPress
- September 29, 2015
- Leave a comment
When working on projects that require user profiles and need additional user information, one needs to create a user meta to store additional information. This is akin to creating a new post meta data was where you store new data of users and link them to your posts; user meta works exactly the same way.
The WordPress database contains a table called wp_usermeta which stores all the additional user information. This table is made of four columns; a unique ID, the user ID, meta name and meta values.
In this article, we are going to learn how to add new custom fields to a user profile and save them in the wp_usermeta table.
On the user profile page, you’ll find the following actions at the bottom of the profile:
- edit_user_profile
- show_user_profile
WordPress allows us to use these actions to add custom fields to the profile page. The code given below adds a new custom field to include extra user information:
|
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 |
/* --------------------------------------------------------------------------- /* --------------------------------------------------------------------------- * User Profile Custom Contact Options * --------------------------------------------------------------------------- */ if ( !function_exists ( 'pt_contact_options' ) ) { function pt_contact_options ( $contactoptions ) { $user_id = $contactoptions->ID; $address = get_user_meta ( $user_id, 'address', TRUE ); $city = get_user_meta ( $user_id, 'city', TRUE ); $telephone = get_user_meta ( $user_id, 'telephone', TRUE ); ?> <h3><?php e_ ( 'User Information', 'pt' ); ?></h3> <table class="form-table"> <tr> <td><label for="address"> <?php _e ( 'Address', 'lms' ); ?></label></td> <td><input type="text" name="custom[address]" id="date_of_birth" value="<?php echo $address; ?>"></td> </tr> <tr> <td><label for="city"> <?php _e ( 'City', 'lms' ); ?></label></td> <td><input type="text" name="custom[city]" id="city" value="<?php echo $city; ?>"></td> </tr> <tr> <td><label for="telephone"> <?php _e ( 'Telephone', 'lms' ); ?></label></td> <td><input type="text" name="custom[telephone]" id="telephone" value="<?php echo $telephone; ?>"></td> </tr> </table> <?php } } add_filter ( 'edit_user_profile', 'pt_contact_options', 10, 1 ); add_filter ( 'show_user_profile', 'pt_contact_options', 10, 1 ); |
This code will add three extra fields to the user profile. It will show the values of these fields only if values are saved. These values can be changed too, but how can you save changed values?
Simple; when a user profile is saved, add an action to store the new information. The save actions needed are personal_options_update and edit_user_profile_update.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//===================================================================== // User Profile Contact Options Save Function //===================================================================== if ( !function_exists ( 'pt_contact_options_save' ) ) { function pt_contact_options_save ( $user_id ) { if ( isset ( $_POST[ 'custom' ] ) ) { foreach ( $_POST[ 'custom' ] as $key => $val ) { $val = empty ( $val ) ? '' : $val; update_user_meta ( $user_id, $key, $val ); } } } } add_action ( 'edit_user_profile_update', 'pt_contact_options_save' ); add_action ( 'personal_options_update', 'pt_contact_options_save' ); |
As we add new fields most of them will be in an array custom[key], we can use the global $_POST[custom] variable to get the input field values from the user profile page. Now, we update the user meta information with these input fields in the foreach loop on _POST[custom] as mentioned in the code (given above). To update the user meta data, we need to use the WordPress function update_user_meta():
|
1 2 3 |
<?php update_user_meta( $user_id, $meta_key, $meta_value, $prev_value ); ?> |
This update_user_meta() function covers the following four parameters:
- $user_id
- $meta_key
- $meta_value
- $prev_value
If you want to display this information within your theme, there are two functions you’ll need; you can either use the function the_author_meta( $field_name, $userID ) or the function get_the_author_meta( $field_name, $userID ). The difference between these two functions is that get_the_author_meta() will return the data, while the_author_meta() will echo the data on the screen. For example:
|
1 2 3 4 5 6 |
$user_id = 5 ; // return the data $ address = get_the_author_meta( 'address', $user_id ); // echo the data the_author_meta( 'address', $user_id ); |
We can use get_user_meta ( $user_id, $field_name, TRUE ); to get the value of the field. For example, to fetch the value of fields for a user whose ID is 5:
|
1 2 3 4 |
$user_id = 5 ; $address = get_user_meta ( $user_id, 'address', TRUE ); $city = get_user_meta ( $user_id, 'city', TRUE ); $telephone = get_user_meta ( $user_id, 'telephone', TRUE); |
In user profile, there is a section titled Contact Info. To add fields to this area, you can simply use the filter user_contactmethods. The code for this is given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* * Add more user contact fields */ if ( !function_exists ( 'pt_add_contact_fields' ) ) { function pt_add_contact_fields ( $profile_fields ) { $profile_fields[ 'skype' ] = 'Skype'; $profile_fields[ 'phone' ] = 'Phone'; return $profile_fields; } } add_filter ( 'user_contactmethods', 'pt_add_contact_fields' ); |
This will add two fields in Contact Info section and will save automatically when the user profile is also saved. We can get the values of these fields in our theme the same way as described in the process mentioned above, by get_user_meta or get_the_author_meta or the_author_meta.
User Comments