Adding and using custom user profile fields

Since I’ve been playing around with user management a lot lately, I thought I’d share a simple technique I picked up. This technique will allow you to easily add new user profile fields that your blog’s users can use to input more information about themselves.

Management of these fields will be coming in a later version of my user management plugin, but some of you may want to do this now.

In this tutorial, I’ll show you how to add an input box for a Twitter username and how to display it on your site, which will look a little something like this:

If you want to see a live example, check out one of my latests posts on Pop Critics.

Adding custom user fields

Open your theme’s functions.php file and drop this PHP code in:

add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );

function my_show_extra_profile_fields( $user ) { ?>

	<h3>Extra profile information</h3>

	<table class="form-table">

		<tr>
			<th><label for="twitter">Twitter</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">Please enter your Twitter username.</span>
			</td>
		</tr>

	</table>
<?php }

This will create a new area in the user edit screen that looks like this:

Additional profile fields
Additional profile fields

The custom part of the code is this bit:

<tr>
	<th><label for="twitter">Twitter</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">Please enter your Twitter username.</span>
	</td>
</tr>

Note that if you want to add more fields, copy that and change twitter to something unique for each additional field. Just make sure you change each instance of twitter.

Saving the custom user fields

Just because we’re displaying these extra fields, doesn’t mean they’ll be saved when the user profile is updated. So, we need one more function to handle this. Drop this PHP code in your theme’s functions.php file.

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

function my_save_extra_profile_fields( $user_id ) {

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

	/* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
	update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
}

Now, your information will be saved.

Displaying custom user fields on the site

For getting these additional fields, WordPress has two nifty functions: the_author_meta() and get_the_author_meta(). The former displays the meta information, and the latter returns it for use in PHP. Each takes in two parameters:

the_author_meta( $meta_key, $user_id );

You can use this to grab the information from any of the fields you’ve created. For example, the $meta_key for our Twitter field is twitter. We just need to call it up somewhere in our theme.

So, what we’re going to do is build an author box to add to the end of our single posts. Once again, we visit our theme’s functions.php file and drop some PHP code in:

function my_author_box() { ?>
	<div class="author-profile vcard">
		<?php echo get_avatar( get_the_author_meta( 'user_email' ), '96' ); ?>

		<h4 class="author-name fn n">Article written by <?php the_author_posts_link(); ?></h4>

		<p class="author-description author-bio">
			<?php the_author_meta( 'description' ); ?>
		</p>

		<?php if ( get_the_author_meta( 'twitter' ) ) { ?>
			<p class="twitter clear">
				<a href="http://twitter.com/<?php the_author_meta( 'twitter' ); ?>" title="Follow <?php the_author_meta( 'display_name' ); ?> on Twitter">Follow <?php the_author_meta( 'display_name' ); ?> on Twitter</a>
			</p>
		<?php } // End check for twitter ?>
	</div><?php
}

Now, all you need to do call the function in your theme’s single.php file somewhere after the post has been displayed:

<?php my_author_box(); ?>

If you’re using a child theme, your theme author can probably tell you a more appropriate action hook to add this function to so you don’t mess up your theme’s template files.

What other custom user field uses can you think of?

This is just another one of those powerful features of WordPress that I don’t see used much. I have several things in mind that I could use this technique for, but I’d like to hear what you’d do with it.

Surely we can do some cooler stuff than just displaying a link to Twitter?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s