Whilst working on a web design project this week I came across a need to gather additional information from people registering on a WordPress site. Seeing as WordPress didn’t offer the fields I needed, I set about working out how to add them.

It turns out the whole process isn’t as painful as first thought. WordPress has built in hooks that we can use to add the fields. In this example I will be adding some social media fields for twitter and facebook, but the process is exactly the same for any fields you may need.

Step 1

Open the functions.php file in your themes root folder (/wp-content/themes/YOUR THEMES NAME/functions.php). If this file does not exist then we need to create it.

Past the following code inside your functions.php file:

<?php
add_action( 'show_user_profile', 'extra_user_profile_fields' );
add_action( 'edit_user_profile', 'extra_user_profile_fields' );

function extra_user_profile_fields( $user ) { ?>
<h3><?php _e("Extra profile information", "blank"); ?></h3>
<table class="form-table">
<tr>
<th><label for="phone"><?php _e("Phone Number"); ?></label></th>
<td>
<input type="text" name="phone" id="phone" value="<?php echo esc_attr( get_the_author_meta( 'phone', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description"><?php _e("Please enter your Phone Number."); ?></span>
</td>
</tr>
<tr>
<th><label for="venue"><?php _e("Venue Name"); ?></label></th>
<td>
<input type="text" name="venue" id="venue" value="<?php echo esc_attr( get_the_author_meta( 'venue', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description"><?php _e("Please enter your Venue Name."); ?></span>
</td>
</tr>
</table>
<?php } ?>

The above code does 2 things. We are first using the add_action( ); function to insert our new fields into the user profile pages. Secondly we are defining those functions.

 

Step 2

We now need to add the code that will save the data that is entered into our new fields.

Paste the below code after the previous code:

<?php
add_action( 'personal_options_update', 'save_extra_user_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_user_profile_fields' );

function save_extra_user_profile_fields( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) ) { return false; }
update_usermeta( $user_id, 'phone', $_POST['phone'] );
update_usermeta( $user_id, 'venue', $_POST['venue'] );
}
?>

The above code again uses the add_action( ); function to add our own code into wordpress’s update function (bit of a tongue twister!). It also checks to see if the current user has the ability to update the profile before making the changes.

 

Step 3

Upload the edited functions.php page to your site and view your profile page. You should now see the added fields at the bottom of the profile screen.

That’s it! If you found this tutorial helpful please let us know in the comment section below.

 

Full source code for easy copying

<?php
add_action( 'show_user_profile', 'extra_user_profile_fields' );
add_action( 'edit_user_profile', 'extra_user_profile_fields' );

function extra_user_profile_fields( $user ) { ?>
<h3><?php _e("Extra profile information", "blank"); ?></h3>
<table class="form-table">
<tr>
<th><label for="phone"><?php _e("Phone Number"); ?></label></th>
<td>
<input type="text" name="phone" id="phone" value="<?php echo esc_attr( get_the_author_meta( 'phone', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description"><?php _e("Please enter your Phone Number."); ?></span>
</td>
</tr>
<tr>
<th><label for="venue"><?php _e("Venue Name"); ?></label></th>
<td>
<input type="text" name="venue" id="venue" value="<?php echo esc_attr( get_the_author_meta( 'venue', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description"><?php _e("Please enter your Venue Name."); ?></span>
</td>
</tr>
</table>
<?php } ?>

<?php
add_action( 'personal_options_update', 'save_extra_user_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_user_profile_fields' );

function save_extra_user_profile_fields( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) ) { return false; }
update_usermeta( $user_id, 'phone', $_POST['phone'] );
update_usermeta( $user_id, 'venue', $_POST['venue'] );
}
?>