How to Add Custom User Meta Data Field on WordPress User Profile

by • On Feb 3, 13 17:39pm • 6213 Views

Over the last couple of years, we have seen how the usage of Social networking sites has grown rapidly. Bloggers like us can take this opportunity to connect more with the audience or site visitors and interact with them using these tools like Facebook, Twitter, LinkedIn etc. By default WordPress doesn’t have any functionality that can let you add your Social networking site’s ID on user’s existing Profile page so that you can share these information to connect with others.

WordPress Tips and TricksHowever, there are so many plugins are out there that would let you add these features and increase WordPress’s usability. But like I always said before, I don’t quite like the concept of using Plugins. If there is a way to add such functionality using simple code, then why not? Why should we use plugins and let others advertise their blog links or whatever on my site?

Being said that, I thought I will show you how to add custom user Meta data field on your WordPress user’s profile page. So that you can use it anyway you want based on your own need. Enough said. So, let’s get started.

Step 1: Log in to your WordPress (Self hosted) site and go to “Appearance” then “Editor” menu.
Step 2: Find the “fucntions.php” file from the right hand side of the screen. Copy and paste the following snippet code at the very beginning of the page and save it.

add_action('show_user_profile', 'extra_profile_fields');
add_action('edit_user_profile', 'extra_profile_fields');
add_action('personal_options_update', 'save_extra_profile_fields');
add_action('edit_user_profile_update', 'save_extra_profile_fields');
function save_extra_profile_fields($userID) {
if (!current_user_can('edit_user', $userID)) { return false; }
update_usermeta($userID, 'twitter', $_POST['twitter']); }
function extra_profile_fields($user) {
<h3>Get Social</h3>
<table class="form-table">
<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.<strong>username</strong></span>
<?php } ?>

Step 3: At this point, click on the “Users” menu and then “Your Profile”. Scroll down all the way bottom of the screen and you should see one extra field (twitter) has been added.
WordPress Custom User Meta field
Now as you can see from the image, we added extra field to get the user’s Twitter ID. You can change it with something else. How to add more fields I will explain it little later but for now let’s see how we can grab the field value (iftekharbhuiyan) and display it on our site.

Step 4: I am assuming that you would use these custom data on your “single.php” or “author.php” page. If that is the case then simply copy and paste the following snippet code on your page and update it.

<?php echo the_author_meta('twitter'); ?>

That is pretty much it. Above snippet code should get your job done.

Adding More Fields
In case if you want to add more fields to display user’s Facebook or Google Plus profile links or IDs etc. Simply add the following line on your snippet code (after line number 7) that you just added on “functions.php” file.

update_usermeta($userID, 'facebook', $_POST['facebook']);

You also need to create input fields to be displayed on user’s profile page. To do so, simply copy everything within <tr></tr> tag and paste it within another <tr></tr> tag underneath the first one. Remember, you must change the input field’s “name”, “ID” and PHP hooks with “facebook” or your desired one. These input fields are unique so their ID, name, and PHP hooks should not match with each other. Finally, to display the value of your custom field, simply “echo” the field value with the same function as we mentioned above simply changing the name of it. That is all.

If you have any question on this regard, please feel free to ask it using the comment section below. Thanks.

You can follow us on Twitter, add on your Google+ circle or Like our Facebook page to get the latest news, updates and reviews.