Powerful Ways to Customize WordPress User Profiles

by in WordPress on 14th Nov 2012 · Comments

One of the best ways to encourage healthy user interaction and engagement on a WordPress website is to provide an excellent user profile system. While this is actually included as a standard feature with every installation of the WordPress software, the standard user profile is rather basic and uninspired.

In a world that is increasingly socially networked and mobile, many WordPress administrators find that it's necessary to greatly expand this profile to include custom fields, author images, and a whole host of other features.

Powerful Ways to Customize WordPress User Profiles


Thanks to a number of great plug-ins and WordPress edits, this is now possible. User profiles no longer need to be relegated to an afterthought within an otherwise well-developed website. Instead, they can be one of the gems that really inspire better engagement between users, authors, and website administrators.

Powerful Ways to Customize WordPress User Profiles

How to Make Edits to the WordPress User Profile Page

First and foremost, WordPress administrators need to understand how edits to the user profile page will be made before they attempt to drag this page out of the WordPress doldrums. These edits will all be made, unless indicated otherwise, by modifying the contents of the current theme's functions.php file.

This file is placed into the root directory of every theme currently installed to the server, and it's the best way to make functionality modifications without damaging key WordPress code in the core files scattered throughout other directories.

For those administrator users who are not familiar with this file, or for those who are unsure where to find this file, it can typically be located at the following server path when WordPress is installed into the site's public_html directory:

/home/public_html/wp-content/themes/YOUR-CURRENT-THEME/functions.php

Remember that edits to the user profile page must be made to the functions file in the current theme's directory. Any edits made to the functions.php in other themes' folders will only be visible if, or when, that theme is activated in the Dashboard.

Adding and Removing Profile Fields from the User Profile Pages

The first thing to do when making the WordPress user profile area more appealing is to remove old and outdated fields, and replace those fields with something that's a bit more relevant to the way people currently utilize the internet. In particular, the first fields that many people remove are the ones that pertain to instant messaging screen names.

Those handles are still in use today, many people prefer not to share them. Furthermore, internet usage patterns are moving solidly in the direction of communication via social networks, rather than instant messaging protocols.

To remove a field, open up the functions.php file and insert the following code. This code will need to be repeated for each field that will be removed from view within the user profile pages:

function hide_instant_messaging( $contactmethods ) {
unset($contactmethods['aim']);
unset($contactmethods['yim']);
return $contactmethods;
}
add_filter('user_contactmethods','hide_instant_messaging',10,1);

The profile fields are hidden because the theme's functions file instructs WordPress to unset them. That essentially removes them from view and makes them go away - at least visually. Their fields will be unavailable for editing, and any content already contained in those fields will be removed from view on any existing profile pages. More lines of code can be added to hide other default fields if the administrator thinks it's necessary.

Now that the old and outdated instant messaging fields have been removed, it's time to add a few new fields that will serve to show off a user's Facebook or Twitter profiles to the world. Considering these two social networks are the two most popular ones online, they're the most likely to be needed by those who sign up at the website as commenters, authors, or even administrators.

The code to produce these fields will be placed into the same "functions.php" file, and that file will be instructed to add these fields to both the profile page itself, as well as the page where profile data can be edited. Here's how it looks:

add_action( 'show_user_profile', 'social_fields' );
add_action( 'edit_user_profile', 'social_fields' );

function social_fields( $user ) { ? >

<h3>Social Media Profiles</h3>

<table class="form-table">


<tr>
<th><label for="social">Facebook</label></th>

<td>
<input type="text" name="Facebook" id="Facebook" value="http://www.facebook.com/USERNAME" class="regular-text" />
<span class="description">Please replace USERNAME with your Facebook username.</span>
</td>
</tr>

<tr>
<th><label for="social">Twitter</label></th>

<td>
<input type="text" name="Twitter" id="Twitter" value="http://www.twitter.com/USERNAME" class="regular-text" />
<span class="description">Please replace USERNAME with your Twitter username.</span>
</td>
</tr>

</table>

With that, we've successfully removed outdated profile fields from use and replaced them with social media fields that will be much better for the vast majority of people who read a given website.

Improving Interaction with a User Profile Image

While it's a great idea to remove old fields and insert new ones that most users will find more useful, there's still something major missing from WordPress user profiles: The ability to upload an image using the WordPress Media Manager and select it as a user's default avatar. This can be solved by a simple, though extensive, edit to the functions.php file.

Most of the work has already been done by WordPress' own stylesheets and script files, so that work will simply be replicated in the functions file. Here's how it looks when a new profile field is created for a user image, and paired with the built-in media uploader tool:

<table class="form-table">

<tr>
<th><label for="pic">Profile Image</label></th>

<td>
<img src="<?php echo esc_attr( get_the_author_meta( 'pic', $user->ID ) ); ? >">
<input type="text" name="pic" id="pic" value="< ?php echo esc_attr( get_the_author_meta( 'pic', $user->ID ) ); ?>" class="regular-text" /><input type='button' class="button" value="Upload" id="upload" />
<span class="description">Select an image and upload it for use on your profile.</span>
</td>
</tr>

</table>

This code gets added to the lines above where we defined a new function for user profile fields. Directly below this code, the entire array of new fields must be "closed" so that the function can resolve itself. That's done by adding the following simple line to the end of the image upload field:

<?php }

With the profile fields now closed out, WordPress administrators will need to create a new function that allows the image uploader tool to work properly. Without the right styles and scripts, no image will upload at all. That can be a serious problem, but it's easily solved by adding the code below to the functions.php file:

function zkr_profile_upload_js() {
?>
<?php
}
add_action('admin_head','zkr_profile_upload_js');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');

And Now, Data Must be Saved to the WordPress Database

User data, at present, has no way of being written to the WordPress database at all. As it stands, someone would fill in the new profile fields, save their profile, and be returned to a page full of blank fields.

This is solved by instructing the profile page to write data to new tables within the database itself, keeping social media and profile picture information securely stored behind the scenes. This code will actually close out the addition and removal of fields within the profile page:

add_action( 'personal_options_update', 'save_social_fields' );
add_action( 'edit_user_profile_update', 'save_social_fields' );

function save_social_fields( $user_id ) {

if ( !current_user_can( 'edit_user', $user_id ) )
return false;

update_usermeta( $user_id, 'pic', $_POST['pic'] );
update_usermeta( $user_id, 'Facebook', $_POST['Facebook'] );
update_usermeta( $user_id, 'Twitter', $_POST['Twitter'] );
}

Adding New Profile Fields to the User Profile Template

In the last line of code, variables were assigned to the three new fields created in this process. Those variables can be used within the user profile template to pull information out of the database and display it publicly. They're a bit longer than traditional variables, but they end up looking like the examples below:

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

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

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

Simply replace the brackets with greater-than or less-than symbols to complete the variable and make it valid. Keep in mind that the output of these variables will be only the information requested in the profile page. Context should be added with basic text and descriptors as usual.

The Plugin Factor: Allowing Users to Edit Their Profile Information from the Front-End

WordPress, by default, allows users to edit their profile information only when they access the WordPress Dashboard. This isn't really the best policy for those readers who merely use their profiles to post comments and control the appearance of their site-wide avatar.

To keep things secure, profile edits should be done from the WordPress front-end only. This functionality must be enabled by selecting an appropriate plug-in.

Profile Builder: The Best Way to Enable Front-End Edits

There are generally two great plug-ins for this purpose. The first is Profile Builder, which actually assigns shortcodes for front-end profile editing and essential changes.

Profile Builder

Because it's definitely the easiest plug-in to use, and because shortcodes can be placed on any given page or even within post content, this is probably the number one plug-in for virtually every WordPress administrator.

Going the Advanced Route with the "Theme My Login" Plug-in

For more advanced users, a plug-in called Theme My Login is a great way to enable front-end profile edits. Additionally, this plug-in allows for profiles to receive a completely different theme, or design, based on the selected user's role within the installation.

Theme My Login

That allows for different profile interfaces for administrators, authors, members, and subscribers, and it's a great way to differentiate among the many different groups of people who utilize the website on a regular basis.

More Resources

Conclusion

As always, be sure to test all new profile fields, and any new front-end profile editing capabilities, before deploying these new features to a large section of the site's users. When everything is working smoothly, sit back and relax the enhanced level of personality and engagement afforded by this vastly improved approach to profile pages.

How have you customized your WordPress User Profiles? Share you tips with us in the comments box below.

Terrance is a versatile web developer and the technical editor at OXP. He enjoys creating functional websites and is particularly engrossed in all the tiny details mixed together to construct great user experiences. He always believe that every web user deserves the best!