Home / Tech Guide / With Simple Codex to Add Custom Fields to User Profile in WordPress

With Simple Codex to Add Custom Fields to User Profile in WordPress

/
/
/
996 Views

WordPress is so popular among users is that it provides us with a great Content 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 tk_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.

add-custom-fields-to-user-profile-in-wordpress1

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’ );

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.

wordpress-user-extra-profile-info

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.

That’s it Thank you for watching @thinknowledge.com

[amazon_link asins='B017ID54G6,B00C77U612,B017ID54G6,B00AUYYVZQ,B01LYSSFM7,8126554568,8131791882,1515233146,B01GSODGZC,1534954546' template='ProductCarousel' store='thinknowledge-21' marketplace='IN' link_id='c8bd129a-4dd0-11e7-80e2-3bd285adad9e']
  • Facebook
  • Twitter
  • Google+
  • Linkedin

Leave a Comment

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

1 Shares
+11
Tweet
Share
Share
Pin