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:
My profile and Twitter link
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
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?
Such a great tutorial that you give up there. I will definitely use it for my blog. The best part of the above tutorial is the way you integrate Twitter with user profile – by adding another part of the page when I key in my twitter user profile.
Besides Twitter’s profile link, it will definitely a good idea to put social bookmarking site especially Stumble Upon’s thumb up icon as I believe that by having that section, it can channel reader’s attention into the section.
Other than that – link to the latest post of the user maybe – especially for guest blogger as it can help to increase the incentive and motivation of the guest blogger.
Hi Justin. Is there a way to extend this to registration, so that the extra fields are required (maybe optionally required, but the input fields would be there) upon registering? Or alternately, maybe just direct people to their profile upon logging in, to complete their profile? I am thinking of using something like this for extended profiles, sort of a membership database, something I haven’t found a good version of yet (and I think you had similar trouble finding a while back?) It’s an area that’s lacking WordPress plugins.
I would use this for simple things like name, address, phone, interests, etc. All the things you’d need to know about a member of a club.
Justin,
I’m never disapointed with the quality of your work. This tutorial is simply excellent, I have learnt something soooo cool today
Thanks for sharing all this usefull info with us. Have a nice day!
Jean
Huzzer Magazine — Other social networks and bookmarking sites would definitely be something to consider. As for linking to guest bloggers’ latest posts, you can use the already available website info from their profiles to do something with.
Chris Hajer — Yeah, it’s entirely possible, but it’s a little more complex than what’s shown here.
You’d have to add your form elements to the
register_formhook. Then, I believe you’d have to overwrite thewp_new_user_notification()function (it’s pluggable) to save it because I don’t think there’s a hook when saving that’ll give you the user ID (you need that ID). I could be wrong about overwriting the function, but I don’t see anything right now that would make it easier.It’s definitely something I’ll be working into my plugin when I implement all of this.
Jean-Baptiste Jung — Thanks. I just like sharing back the things I learn with the community. If I had the time, I’d write a new tutorial every day.
As for usage ideas I am slowly planning collaboration/hobby site, most probably on P2 theme (if I don’t find something more fitting).
I want to give users some degree of control over what parts (probably compartmentalized as widgets) of site they see, as well as option to filter RSS-embebed content with their keywords.
I hadn’t even started on actual code, but this technique seems like it will be of use. Thanks for explaining it!
This week we decided, for the project I’m involved in, that we want to use extra profile-info which the users can manage by themselves; and here is the answer to it.
Thanx, it’s really a timesaver and right on time
[...] segnalo un’ottima guida che vi permetterà di aggiungere un campo personalizzato nel profilo utente del vostro blog con [...]
Nicely done – here’s another idea, instead of the code in functions.php, roll it all into one file, drop it in mu-plugins. Add some shortcode options then users across a WPMU install can whip up their own profile area wherever they like.
[...] Adding and using custom user profile fields – In another great tutorial from Justin Tadlock, he goes over how to use user profile fields in your theme, as well as how to make your own custom user profile fields such as a “Twitter” field. This can be useful on a multi-author blog to display author info on each of their respective posts. [...]
Great tutorial Justin, thanks a lot. I had the same thought as Chris above. I know there are a couple plugins out there that attempted the addition of form input fields on the registration form, but if this could ultimately be included in your user role plugin, it would simply be fantastic.
Hey Justin,
it’s become a lot easier to do this with a patch that I proposed and wrote a couple months back: http://core.trac.wordpress.org/changeset/11784. This is in trunk and will be included, as it looks right now, in 2.9, after that, user fields are filterable, and you could easily add the Twitter profile field just by doing this:
I’ll do a quick post detailing it all
I could think about custom user fields like “Hobbies”, “Location” or “Occupation” to make the users less faceless.
Post done, check it out: User Contact Fields in WordPress 2.9.
Rarst — The
update_usermeta()function could definitely be your friend when coding it. There’s loads of different things you can do with it.visaap — You’re welcome. I hope it comes in handy.
Andrea_R — Fortunately, the shortcodes are done. I’ll definitely be rolling this up into version 0.2 of my upcoming user/role plugin.
Adam W. Warner — It’s on my to-do list, so you can look forward to it in a future release.
Joost de Valk — Yes, I’ve seen the patch. Unfortunately, it does not make user fields filterable. It only makes a certain type of user field filterable — input boxes for contact information.
While the patch is wonderful, it doesn’t take into account textareas, checkboxes, radio boxes, select boxes, or any other type of form element I want to add other than a text input box under the “Contact Info” section.
Andreas Graf — Those are definitely some good ideas for extending the user fields.
I have a feeling your to-do list looks a lot like this.
This is wonderful and so easy to follow, thanks so much for sharing!
I’m trying to incorporate it into the author archives using this method: http://codex.wordpress.org/Author_Templates
Is there a way to code the twitter link so that it’ll work outside of the loop?
Adam W. Warner — I’ve been looking all over for that. Where’d you find it?
Amanda — Just use the
the_author_meta()shown above in the post. You’ll need to add in the second parameter (user’s ID).Justin this look cool and familiar (http://blog.ftwr.co.uk/archives/2009/07/19/adding-extra-user-meta-fields/)
With regard to the improvements in 2.9 – what use-case do you have for anything other than a text box for a contact info attribute of a user?
(BTW – You don’t need the current_user_can() check when processing the new form fields as the capability has already been checked by the main form processing code but it is always better to be safe than sorry)
i’m doing a site whereby each member has their own post… I’d like to see this profile page used as a means to set up their post…. maybe even incorporate a basic tinymce editor?
Another very informative post Justin. I keep coming back to your site to learn more. Keep up the good work.
I learn so much from you Justin!
Thanks for this.
(may I take this opportunity to tell you how nice it would be to have a search option on your site?)
I’m using something similar to this to add links to iTunes and CDbaby for the discography pages on a site I’m working on (http://burntsugarindex.com/making-love-to-the-dark-ages/) but I think your method is a bit more elegant.
I’m going to have to revisit that…
westi — Man, I wish I would’ve seen that before I had to figure this out all on my own. It would’ve been helpful.
As for use cases, I’d rather show you an example than describe it.
CG — I don’t think the user profile page is the best place to be posting from. I’d recommend just using the normal post editor.
amy gail — Maybe I’m missing something, but I don’t see what the iTunes and CDBaby things have to do with user profiles.
You’re right – Not so much user profiles
- I’m thinking along the line of the way you’ve inserted the twitter user name via custom fields and hooked them into the author meta.
In my case – each CD has it’s own link to iTunes and CDbaby- I’m using custom fields (in custom single post templates) for that now and it works. Your post has me thinking that I can do it a bit more elegantly.
That’s all
I’m jealous- what I wouldn’t give to be able to create this kind of code myself! For now, I’ll just have to rely on you.
Hey Justin… I would love to see this code along with your user management code to be used for a comprehensive dating site for wordpress…. but integrated with a paypal/different costs for different features thingy.
hi Justin.. how would I use this with a text area, checkboxes, drop down list etc…
As to extra fields, it would be nice to show either the most recent posts by the user, ‘title-date’ format, or even better allow the author to set permanent links to their favorite posts or both.
This is one area of wordpress that has really been overlooked. So many volunteer organizations use wordpress and could use a membership directory.
It should be easy to add extra users fields as needed (address, phone, etc).
The user should have an option button to opt in or out of appearing in the directory.
The directory would be protected and not viewable unless you were log in.
The admin would have a slightly different view of directory so everyone is included.
Even better would be option buttons next to each field to decide which info is ok to display.
A drag and drop interface to customize where info goes on your directory page.
This would make wordpress more useful to churches, neighborhood associations, hobby groups etc.
[...] Campos personalizados: como adicionar informações extras, na hora de cadastrar posts, páginas ou usuários; [...]
I’m going to look into doing that – adding custom fields helps your audience tell you more about themselves, and that creates a nice report between you, which, needless to say, is highly beneficial for your blog and online business.
Great tutorial.. Thanks Justin..
Great TUT! Can you think of a way to add an mp3 upload field that will allow the visitor to listen to an mp3 sample of someone’s music, such as a band?
Justin, really a outstanding Tut. Thank you fort sharing this.
Like Vince I would like to know if there is a way to upload. In my case an .jpg or .gif file.
Any ideas on that.?
thats a cool tutorial, thank you very much!
i’m running a website for a cycling club, and i wanted a (protected) page to list all the members full names and contact info like mail adress, home and work phone nr etc.
Also, each member should be able to modify his own (but only his) data.
Think your tutorial gave me exactly the tools needed for this..
great idea.
short and powerful.
Thks
[...] Adding and using custom user profile fields – In another great tutorial from Justin Tadlock, he goes over how to use user profile fields in your theme, as well as how to make your own custom user profile fields such as a “Twitter” field. This can be useful on a multi-author blog to display author info on each of their respective posts. [...]
[...] Shared Adding and using custom user profile fields [...]
Hya, ty for the code/tutorial. You are mentioning an plugin, what will this plugin do exactly?
Will it add custom fields to User Profile, and automaticly add them to the register process? Maybe also an customized register ‘page’?
If so I would gladly beta test anything for you. Else I have to write them myself, or together even.
I’ve been working on building up a new theme profile page that conglomerates all of the writer’s social media profiles into one spot, and I think this will work perfectly! Thanks for the tutorial.
Great work and easy to follow instructions. Keep up the excellent work
Hi Justin… you still alive these days?
Just wondering…
1. Are you planning to release this nifty little code as a plugin?
Thanks for good article. I appreciate your thoughts and information presented at this time.
This is so awesome .. thanks! It would be cool to be able to upload various images as well associated with authors .. that could be your next tutorial .. great work!
You are a bloody champion!!!!
I will use it Justin, thanks for this tips
Another very informative post Justin. I keep coming back to your site to learn more. Keep up the good work.
This is a Life!
is there a way to add the First Name and Last Name fields onto the regitration page?
Awesome tutorial, thanks!
I’ve used it to create a load of biography fields for a band site, so ‘Instrument’, ‘Musical History’ and ‘Influences’ all feature in there. So cool
Great tutorial!!! I just wonder how you get a textarea instead of regular text field?
Justin– as always, great tutorial.
I’d love to take some of these custom fields and show them in the comments form next to “Website” for instance. Is this possible with these custom fields?
Steve
This is a great tutorial.
I’m doing something similar to what you’ve shown, but have run into one problem – the custom meta data I enter on the profile form gets saved (it displays in my custom author template fine), but once submitted the custom fields are blank on the profile form unless I’m looking at it from within the admin side.
This is the basic formatting for all the text fields:
Is there something obvious that I’m doing wrong?
Let me try that again:
For some reason I can’t get this to work.
My profile page doesn’t contain the twitter section & going to a post having put the php my_author_box in single.php brings up this error:
Fatal error: Call to undefined function my_author_box() in /home/mobileus/public_html/blog/wp-content/themes/inove/single.php on line 58
(line 58 is where the php my_author_box thing is.)
Anyone help by any chance? (REALLY WANT THIS LOL!)
[...] reconsider this approach, as there is now a way to add custom user meta via core functions. Visit Justin Adlock's blog for a short and sweet summary of how to do [...]
Hi! Thanks for your guide it’s really usefull.
But I need some more suggestion, what I need to do if I want to upload a pdf file also?
Something like a resume attached to the profile.
Thank you so much.