Tutorials Web Development

Add Custom Fields to User Profile in WordPress

5/5 (3)

One of the reasons WordPress is so popular among users is that it provides us with a great user management system and ability to create multi-author blogs and publication platforms. However in some cases there is a necessity to expand the default user information, and add more fields to the user profile. In this tutorial we'll show you how to add and process custom meta fields for WordPress users. There are two ways to add user metadata, let's take a closer look at each of them.

Using user_contactmethods filter

The first way is the easiest one, but it has some limitations. By using this method you would able to add contact information, such as social media links, but you won't be able to add any other custom data. In most cases, however, that would be more than enough, that's why we'll show you how to use this first.

user_contactmethods is a filter which is called by wp_get_user_contact_methods. Using this filter we can add required social fields and output them on the user page in the admin panel. Then we would be able to fill out each field, and save the new user information. If you'd like to use this filter, add the following code to your functions.php file:

The function tm_additional_contact_methods is called every time when we're pulling the user information from the database. The argument $fields is an array which contains all the contact options. In our function we use it to add three additional fields, and return it for further processing. After we added the filter, you can find the new fields in the 'Contact Info' section.

User profile information in WordPress admin panel

In order to display the saved data on the front-end, use the function get_the_author_meta, for example if you'd like to display the FaceBook profile link, use

get_the_author_meta( ‘facebook’ );

wordpress themes

Using 'edit_user_profile' and 'show_user_profile' hooks

The second way of adding user information would be more flexible, but also more complex. It includes two stages, first we need to output the custom fields, and then save their values to the database.

In order to add our own fields, we'd be using edit_user_profile and show_user_profile hooks, which are called right before outputting the 'Update' button on the user page (or on your own profile page). Let's try adding a field for showing user's birthday. In order to do that, we need to add the following code to the functions.php file:

Let's examine this code in detail. First, we need to do some preparation work. Since the range of the requested data is limited by the number of days and months, it would be much better to add not simply text input fields, but select boxes with a list of days and months. That's why let's create an array with a list of available months.

We can also get the value of birth date saved in the database. In order to avoid errors, let's combine the array from the database and the array with default values by using wp_parse_args.

The next step would be to write the HTML code for our fields. We're going to fill in the select boxes with for and foreach loops, and check which of the options is saved in the database by using selected function. We should pay a special attention to the name attribute of the select boxes, their value is set in birth_date[day] format. In such a way we can store the date of birth in a single array.

After adding this piece of code we can see the following picture on the user profile page:

User's birth date meta data in WordPress admin panel

Now let's add a mechanism of saving the field values into the database. In order to do that we're going to add the following piece of code in our functions.php:

At the beginning of this function we've added several security checks in order to avoid mistakes when saving data to the database.

Now by using get_the_author_meta function we can output the user's date of birth on front-end. In our case this function returns an array with elements containing day, month, and year of birth of the user.

At the end we can combine the first and second examples and use them as a foundation for a function that would display an extended information about the user:

Let's quickly go through the code in our function. At the beginning we're creating an array with the social media networks data, so that we can use it to display the list of social links of a user. The date of birth can be displayed using implode function, which will transform the elements of the array into a string, using a space as a delimiter. The rest of the user data can be displayed using the standard WP functions such as get_avatar, the_author_posts_link, and the_author_meta.
Feel free to download the source code for this tutorial, which we decided to transform into a small plugin. After installing and activating the plugin, you can display a box with additional user information using this line of code:

We hope this tutorial helped you understand the methods of adding user metadata to your WordPress site at a deeper level, and implement such methods on your own.

Stay tuned, more tutorials are coming soon!

Subscribe to our daily WordPress hack-o-letter!

Don't miss your next WP Hack

9 Responses

  1. I do not see code: “we need to add the following code to the functions.php file:” Please fix this.

  2. Can’t see the code bro :/ seems like there’s something screwed in the page.

    1. Hi!

      It’s all there. A screenshot would be appropriate, so I could see what you are seeing.

  3. Would it not be better to use a date picker to enter the date, and then to store the date as a UNIX timestamp? Then the date can be processed using the built-in date and time functions.

    1. How would you do this Ken? I think its a great idea. Can you show an example of what you would replace in his tutorial?

Leave a Reply

Your email address will not be published. Required fields are marked *