Create Custom Update Profile Page For WordPress Users
Posted by in PHP May 30, 2011 44 Comments

In some cases, you want to create a custom WordPress page template which allows your members be able to update their profile on a nicer page with some images and HTML code instead of using the boring WordPress Dashboard.

In previous tutorial, I showed you how to add some extra information for your member profiles. In this tutorial, I’ll combine that one to create a new update profile page based on a new custom template in WordPress in order to update both basic information: First Name, Last Name, Email, Password and Extra profile information: Facebook URL, Twitter, Date Of Birth, Phone, Address, City, Province and Postal Code.

1. Create a new Template Page

Make sure you get familiar with Create A New Template For WordPress Page. In this tutorial, let create a new file page-update-profile.php in your theme’s directory and assign the template name: Update Profile as below:

<?php
/*
Template Name: Update Profile
*/
?>

After that, go to WordPress Dashboard and add a new page based on the Update Profile template.

WordPress Create Custom Update Profile Page

WordPress Create Custom Update Profile Page

2. Add some extra profile informations

As I mentioned above, the custom update profile page will allow people update both their basic and extra information. Therefore, let create some extra information for your member profile such as: Facebook URL, Twitter, Date Of Birth, Phone, Address, City, Province, Postal Code or whatever informations you want.

3. Put them all together

Below is the full source code of the page-update-profile.php for Update Profile template. It shows profile form and auto fill in all information of logged in user.

<?php
/*
Template Name: Update Profile
*/
 
$wpdb->hide_errors(); nocache_headers();
 
global $userdata; get_currentuserinfo();
 
if(!empty($_POST['action'])){
 
	require_once(ABSPATH . 'wp-admin/includes/user.php');
	require_once(ABSPATH . WPINC . '/registration.php');
 
	check_admin_referer('update-profile_' . $user_ID);
 
	$errors = edit_user($user_ID);
 
	if ( is_wp_error( $errors ) ) {
		foreach( $errors->get_error_messages() as $message )
			$errmsg = "$message";
	}
 
	if($errmsg == '')
	{
		do_action('personal_options_update',$user_ID);
		$d_url = $_POST['dashboard_url'];
		wp_redirect( get_option("siteurl").'?page_id='.$post->ID.'&updated=true' );
	}
	else{
		$errmsg = '<div class="box-red">' . $errmsg . '</div>';
		$errcolor = 'style="background-color:#FFEBE8;border:1px solid #CC0000;"';
 
	}
}
 
get_header(); 
 
get_currentuserinfo();
?>
 
		<div id="container">
			<div id="content" role="main">
 
<form name="profile" action="" method="post" enctype="multipart/form-data">
  <?php wp_nonce_field('update-profile_' . $user_ID) ?>
  <input type="hidden" name="from" value="profile" />
  <input type="hidden" name="action" value="update" />
  <input type="hidden" name="checkuser_id" value="<?php echo $user_ID ?>" />
  <input type="hidden" name="dashboard_url" value="<?php echo get_option("dashboard_url"); ?>" />
  <input type="hidden" name="user_id" id="user_id" value="<?php echo $user_id; ?>" />
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
	<?php if ( isset($_GET['updated']) ):
$d_url = $_GET['d'];?>
	<tr>
	  <td align="center" colspan="2"><span style="color: #FF0000; font-size: 11px;">Your profile changed successfully</span></td>
	</tr>
	<?php elseif($errmsg!=""): ?>
	<tr>
	  <td align="center" colspan="2"><span style="color: #FF0000; font-size: 11px;"><?php echo $errmsg;?></span></td>
	</tr>
	<?php endif;?>
	<tr>
		<td colspan="2" align="center"><h2>Update profile</h2></td>
	</tr>
	<tr>
	  <td>First Name</td>
	  <td><input type="text" name="first_name" id="first_name" value="<?php echo $userdata->first_name ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
	  <td>Last Name</td>
	  <td><input type="text" name="last_name" class="mid2" id="last_name" value="<?php echo $userdata->last_name ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
	  <td>Email <span style="color: #F00">*</span></td>
	  <td><input type="text" name="email" class="mid2" id="email" value="<?php echo $userdata->user_email ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
	  <td>New Password </td>
	  <td><input type="password" name="pass1" class="mid2" id="pass1" value="" style="width: 300px;" /></td>
	</tr>
	<tr>
	  <td>New Password Confirm </td>
	  <td><input type="password" name="pass2" class="mid2" id="pass2" value="" style="width: 300px;" /></td>
	</tr>
	<tr>
	  <td align="right" colspan="2"><span style="color: #F00">*</span> <span style="padding-right:40px;">mandatory fields</span></td>
	</tr>
	<tr><td colspan="2"><h3>Extra profile information</h3></td></tr>
	<tr>
		<td>Facebook URL</td>
		<td><input type="text" name="facebook" id="facebook" value="<?php echo esc_attr( get_the_author_meta( 'facebook', $userdata->ID ) ); ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
		<td>Twitter</td>
		<td><input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $userdata->ID ) ); ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
		<td>Date Of Birth</td>
		<td><input type="text" name="dob" id="dob" value="<?php echo esc_attr( get_the_author_meta( 'dob', $userdata->ID ) ); ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
		<td>Phone</td>
		<td><input type="text" name="phone" id="phone" value="<?php echo esc_attr( get_the_author_meta( 'phone', $userdata->ID ) ); ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
		<td>Address</td>
		<td><input type="text" name="address" id="address" value="<?php echo esc_attr( get_the_author_meta( 'address', $userdata->ID ) ); ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
		<td>City</td>
		<td><input type="text" name="city" id="city" value="<?php echo esc_attr( get_the_author_meta( 'city', $userdata->ID ) ); ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
		<td>Province</td>
		<td><input type="text" name="province" id="province" value="<?php echo esc_attr( get_the_author_meta( 'province', $userdata->ID ) ); ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
		<td>Postal Code</td>
		<td><input type="text" name="postalcode" id="postalcode" value="<?php echo esc_attr( get_the_author_meta( 'postalcode', $userdata->ID ) ); ?>" style="width: 300px;" /></td>
	</tr>
	<tr>
	  <td align="center" colspan="2"><input type="submit" value="Update" /></td>
	</tr>
  </table>
  <input type="hidden" name="action" value="update" />
</form>
			</div><!-- #content -->
		</div><!-- #container -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

When click Update button, it will call edit_user() WordPress function to update all basic information then call a new personal_options_update() function to update all extra information for the user.

WordPress Custom Update Profile Page

WordPress Custom Update Profile Page

Note: you can read and download the source code from my previous tutorial on Adding More Extra Informations Or Fields To WordPress User Profile to get more detail in step 2 and the declaration of the personal_options_update() function.

+ Download all source code of the page-update-profile.phpfile.

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at hoan@4rapiddev.com
  • http://www.rapidsofttechnologies.com/php-development.html Adele Alison

    The article is valuable for all word press users.

  • adamo

    agree, big thanks!

  • http://www.hardscapesmarketing.com Patrick

    I am using a memberhip software that has a link in the sidebar widget to update their profile. How can I change this url to go to the /update-profile/ page?

    Currently the url is /wp-admin-profile.php
    I can’t find it anywhere!!

    Please help!

    Thank you!

    • hoanhuynh

      Hi Patrick,
      As I mentioned above, you may create a custom update profile page with a custom url to replace the Update Profile page in the Dashboard.

      BTW, could you share which membership software you’re using, I’ll take a look to see if anything I can help.

  • http://www.cvmagazin.com Rob

    Thanks for your codes as WP-Plugin.
    How can I add some css modification into page layout? Something wrong with style.css

    • hoanhuynh

      Hi Rob,

      Please understand that the image is just a illustration when I work on default WordPress template: twentyten and it may has a little bit difference with your current template.

      You’re free to modify the style of the custom profile page by adding some definitions direct on that page.

      Hope that helps.

  • Jennifer

    Thank you so much for posting this!
    It really worked :)

  • andrew

    is this neccesary?

    im getting troubles with it
    thanks

    • andrew

      is this neccesary?

      //
      //

      im getting troubles with it
      thanks

  • andrew

    this is stupid. i meant the last two lines

    • hoanhuynh

      Hi andrew,

      What’s your troubles, anything I can help?

      • andrew

        sorry about my bad mood. ive been trying all day to make a custom profile on a page and i couldnt. my problem is that when i make a page based on that template, just like you did, i get the profile fields on the page i need but they look ugly. i mean, like without any styles (dont look like your image). the second problem is that i get all the links that are present on the default sidebar. (search, categories, archives, etc) in a huge size. dont know why. thanks

        • hoanhuynh

          Hi andrew,

          Does it mean than you success created the profile page, your problem is just the look & feel.

          The image is just a illustration when I work on default WordPress template: twentyten and it may has a little bit difference with your current template.

          Let try to modify/add some css styles to fix it.
          Hope that helps.

  • Zach S

    I’m finding that the profile page does not update after submission. Any idea why this would occur?

  • Daniel

    Cool tip! But, if i want edit some select form? How can i do it, in this edit page?
    Tnks!

    • hoanhuynh

      Hi Daniel,

      If you go right, you can edit those information in the Dashboard via User Profile page.

      • Daniel

        No, sorry.. I wnat give the user the option to edit some extra select form…

    • http://www.yahoo.com/ Jacoby

      Good job making it appaer easy.

    • http://www.facebook.com/ Nona

      Hahaahha. I’m not too bright today. Great post!

  • http://www.bing.com/ Star

    Thanks for spending time on the cmoupter (writing) so others don’t have to.

  • Jhuna

    Hi!

    Thanks for this. Anyway, is it possible to change the field into ? If it is, how would I get that?

    Your reply would be greatly appreciated! thanks!!!!

  • http://www,greencrossing.org Greencrossing

    Great and useful information. Thanks!

  • http://www.techunlock.in www.techunlock.in

    great post

  • Роман Кокарев

    Thank you!

  • Lauren

    Hi, this tutorial is fantastic! Thank you! I was wondering if I can use this if I’m using the Cimy Extra User fields plugin? Or would you recommend just doing it from scratch?
    Thanks!!

    • http://4rapiddev.com/ Hoan Huynh

      I actually don’t want to start anything from the scratch except some special cases or I don’t know any plugin. If  
      Cimy Extra User plugin fixes your need, let go with it. :)

      H2.

  • Johnray

    How do you prevent users that are not logged in from just going directly to /update-profile page?? I attempted to use wordpress’ auth_redirect(); function but that just does a redirect loop to the login page. 

    • Johnray

      Just found something that will secure the update-profile page better. 

      • Johnray

        if (!is_user_logged_in()) { auth_redirect(); } 

        • Hoan Huynh

          Sorry but I don’t get your question. What you want to display in this case.
          H2.

          • vaibhavmav

            Hey
            u should add some php code which prevents visitors or guest to acces the page

  • Tom Rodman

    Awesome tutorial Save me a lot of time. 

    I’m having one strange problem, though… When I use it (actually a modified version of it) myself (as the Admin), hitting the submit button clears “Show Toolbar when viewing site” for my profile, essentially “taking away” my WordPress admin bar, when I”m logged in.

    I find that strange, since that’s not one of the fields I’m working with.

    The “workaround” is to go back into /wp-admin, and check “Show Toolbar when viewing site” again, but I have a number of people who log-in as editors, contributors, etc., and it seems that they’re all losing their admin bar the same way, whenever they use this form.

    Any suggestions/ideas for preserving the state of that toggle through this profile editing form?

  • mbt

    Thanks for this post!! It’s really useful. I’m wondering how can I make a custom input field mandatory?

  • http://pulse.yahoo.com/_7HKG66P65HC2H22D76MQIWXTA4 COSMAS

    Hello,

    Thanks for your wonderful tutorial. Please How do i affec the look of he age with css style? where do i place the css style code. any guide? if you have some example code i will apreciate it. I am want to shrink the the update page to a small size both the test and the boearder line.

    Thanks

  • http://www.facebook.com/profile.php?id=1398874519 Peter Zimirev

    how can i use type radio ? to choose male or female ???

  • Thomas

    Great guide! Very easy to follow and i got a great result using it! But i do have a single problem. When i log in as a user and try to update some informations, it returns an error telling me that the email has already been used and i have to choose another one.
    Do you have any idear why i get that error?
    Thanks…

    • thomas

      By the way, i do not get the same error when i update the user in the backend :-S

  • Samy Richard

    How to add current password field in that form,,,,

    • Samy Richard

      well get solution of it,, thanks,,i solve it

      • Danny

        how? Thanks.