Enhanced WordPress User Profiles, Part 2: Adding Extra Fields to the Profile

In part two of our series recapping my presentation on Enhancing WordPress User Profiles, we’ll go through the steps and code involved in manually removing and adding new fields to the default User Profile form in WordPress.

For our demonstration, I am creating a team biography page for a corporate or small business website. Using WordPress’ User Profiles, we can create a user account for each team member, and grant them access to maintain their own information.

The default User Profile form built into WordPress includes several fields you might not want to use or display to those team members, like Jabber or IM information. You also might want to add more fields that aren’t included by default, like their Twitter or LinkedIn profile URLs. This can be done with plugins like Cimy User Extra Fields, or you can do it manually in your functions.php file.

We need to do three steps in our functions.php file: remove the unnecessary fields, add the new fields, and save the new details to our database.

First, we remove the fields that we don’t want to include on the page. Some of them can be removed easily with a filter:

// Remove/change profile fields
function remove_contact( $contactmethods ) {
  unset($contactmethods['aim']);
  unset($contactmethods['jabber']);
  unset($contactmethods['yim']);
  return $contactmethods;
}
add_filter('user_contactmethods','remove_contact',10,1);

Others, like Website, prove a bit more challenging and have to be removed with PHP.

function remove_fields( $buffer ) {
	$website = '#<th><label for="url">Website</label></th>.+?/table>#s';
	$buffer = preg_replace($website,'<th></th><td></td></tr></table>',$buffer,1);

	return $buffer;
}
function profile_admin_buffer_start() {
    ob_start("remove_fields");
}
add_action( 'wp_head', 'profile_admin_buffer_start');

Next, we add our new fields.

// Add profile fields
add_action( 'show_user_profile', 'extra_profile_fields',1,1 );
add_action( 'edit_user_profile', 'extra_profile_fields',1,1 );

function extra_profile_fields( $user ) { ?>

    <h3>About Yourself</h3>

    <table class="form-table">
        <tr>
            <th><label for="jobtitle">Role</label></th>
            <td>
                <input type="text" name="jobtitle" id="jobtitle" value="<?php echo esc_attr( get_the_author_meta( 'jobtitle', $user->ID ) ); ?>" class="regular-text" /><br />
                <span class="description">Example: Chief Technology Officer</span>
            </td>
    	<tr>
	</table>

	<h3>Social Media Profiles</h3>

	<table class="form-table">

		<tr>
			<th><label for="twitter">Twitter URL</label></th>

			<td>
				<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Example: http://twitter.com/powerbyproxi</span>
			</td>
		</tr>

		<tr>
			<th><label for="facebook">Facebook URL</label></th>

			<td>
				<input type="text" name="facebook" id="facebook" value="<?php echo esc_attr( get_the_author_meta( 'facebook', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Example: http://facebook.com/powerbyproxi</span>
			</td>
		</tr>

		<tr>
			<th><label for="linkedin">LinkedIn URL</label></th>

			<td>
				<input type="text" name="linkedin" id="linkedin" value="<?php echo esc_attr( get_the_author_meta( 'linkedin', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description">Example: http://linkedin.com/in/gregcross</span>
			</td>
		</tr>

	</table>

<?php }

Lastly, we save our new fields to the database.

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

function save_extra_profile_fields( $user_id ) {

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

	update_usermeta( $user_id, 'jobtitle', $_POST['jobtitle'] );
	update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
	update_usermeta( $user_id, 'facebook', $_POST['facebook'] );
	update_usermeta( $user_id, 'linkedin', $_POST['linkedin'] );
}

Tomorrow, I’ll show you how to use your new fields in your template file. Stay tuned!