Adding Custom User Fields – WordPress

Each website I’ve worked on recently the preferred CMS has been WordPress, most of these websites aren’t blog based. As a web developer who is very familiar with WordPress, I prefer not to run to the high ground in search of a plugin to do something which I can set-up myself. Needless to say the less plugins used, the less chances of conflicts and major headaches!

Most websites seem to feature a ‘Team’ page, which displays the users and their information, social network links, quotes, company position etc. I’m all for making a website as user friendly as possible, so the little amount of HTML in the WYSIWYG (What You See Is What You Get) the better. But I’ll come back to that later, for now… I’ll cover the basics.

So, in this tutorial I’ll be showing you how to create and display custom profile fields and how to display them on your WordPress website.

Adding Custom User Fields

Add the code below to your functions.php file.

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 - e.g. DesignNodeUK</span>
			</td>
		</tr>

	</table>
<?php }

The above snippet of code will add a custom field to the user profile page, which will display at the bottom of the page.

<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>

The above section of code is the custom part, feel free to change this to your liking. This can be duplicated as many times as you require, please note to change references to ‘twitter’ accordingly to the name of your additional fields.

Saving Custom User Fields

Now you have created your custom fields which are displayed on the ‘edit user’ page, you now need to be able to save them to the database. Please copy the code below into your 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;

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

Once you have added the code above to your functions.php file you’ll be able to save your custom fields. Please remember to duplicate line 9 and rename ‘twitter’ accordingly to the additional fields that you have created.

Display Custom Field On A Post

Now you have your fields and information saved in the database, all you need is the ability to display them on the front end of your website. Simple, just copy and paste the below code in your preferred section of loop-single.php and your information will be displayed accordingly. Please note, to display different fields you’d need to change ‘twitter’ accordingly.

<?php
$twitter = get_the_author_meta( 'twitter');
echo '<p>Follow me on twitter <a href="http://www.twitter.com/'.$twitter.'" target="_blank" title="Follow '.$twitter.' on Twitter">@'. $twitter. '</a></p>';
?>

Now you have the ability to display custom profile fields, don’t just stop at social media links… Explore and experiment, if you have any problems please let me know via the comments below.