Showing Additional Contact Fields in WordPress Registration Form

In this simple, three step tutorial you’ll see how easy it is to modify list of contact method fields being used in WordPress user profiles and display those fields in WordPress registration form. Tools needed to achieve this are custom fields from usermeta table, one WordPress filter hook and two WordPress action hooks.

This could be very useful for WordPress powered websites that allow anyone to register and display user (author) information attached to their posts, on authors’ profile pages or anywhere else.

OK, so let’s start by getting rid of the old and welcoming the new. Raise your hand if you used Yahoo IM, AIM or Jabber (seriously WordPress, no ICQ??) fields in WordPress user profiles. Good, you’re the 1%, shame on you. In order to drop those three and add Twitter, Facebook and Google+, we need to hook our custom function into a WordPress filter hook, or in plain English – modify output of a WordPress function.

Our custom function, ts_modify_contact_fields() intercepts $contactmethods array before it’s being output, removes the AIM, YIM and Jabber and adds Twitter, Facebook and Google+ instead. You can add this code to your functions.php and check out your user profile from the dashboard. If you’re not already familiar with add_filter function, you should definitely check out its Codex page.

Now that we have stepped into the 21st century and social networks have replaced AIM, YIM and Jabber we can show off this new data on our website by using get_user_meta() function. For example, in order to show official Twitter Follow button you should do this:

What that block of code does is check if user with ID = $user_id has entered Twitter info, and if the answer is yes, displays the Follow button:

Follow @slobodanmanic

All that is pretty neat, but people are lazy, and they tend to forget things, right? Why not allow users to fill in their contact information while they register. I do love WordPress registration form the way it is now, dead simple with only two fields (although, being able to set your own password would be nice – more on that in our post on allowing users to set password during registration), but if you’d really like your users to enter their additional contact info and don’t plan on making the fields mandatory, why not add them to WordPress registration form? Here’s how:

In the first block of code we hooked our custom function into a WordPress filter hook to modify WordPress’ output. This time, we’re using an action hook to hook our custom function into a WordPress action. Read more about add_action() function at the official WordPress Codex page.

Once again, that last block of code in plain English – “Hey WordPress, when you run register_form action, would you be so kind to show these fields as well? Thanks!“. Kinda like, “Honey, since you’re going out to a bar, could you take out the trash as well?” but more techy. It’s adding a function (taking out the trash) to your action (going out). The filter function is different, what it says is “Honey, now that you’re going to take out the trash, could you take this heavy old chair that we don’t need as well?” – you’re still taking out the trash, it’s just a little bit different – your output (pun, pun) is being filtered!

So now we can see and edit the fields in user profiles and we have some additional form fields in WordPress registration form. Next and final step would be to store those values into WordPress database, and in order to do that we need to hook into user_register action hook:

Yes, customizing WordPress registration form really is as simple as that, it took just 37 lines of code (without comments and empty lines, of course, I’m trying to make this look good!) to take care of:

1. Removing some unused fields and adding Twitter, Facebook and Google+ contact information fields, hooking into user_contactmethods filter hook
2. Adding those fields to WordPress registration form, hooking into register_form action hook
3. Making sure they get stored in WordPress database when new users register, using user_register action hook

If you have an idea of how to improve this process, I’m sure you know how a comment form works :)