15 Dec

How to build a custom profile page in Wordpress

(edit: this doesn't work in wordpress 2.2, below code was tested in wordpress 2.0)
Ok, now that I've got the custom register and login pages working, I also want a custom profile page. This is done in a different way from the register and login pages, but it's do-able.

First you'll need to make a custom page template for this, so in your theme dir, look for the file called page.php. Make a copy of this, and name it profilepage.php. In the beginning of the file, add the following lines of code:

<?php
/*
Template Name: Profilepage
*/

Next, look for lines that go like

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

... some php and html code ...

	  <?php endwhile; endif; ?>

And replace this whole bit with the following code:

    <?php if ( isset($_GET['updated']) ) { ?>
<div id="message" class="updated fade">
<p><strong><?php _e('Profile updated') ?></strong></p>
</div>
<?php } ?>
<?php global $userdata;
get_currentuserinfo();
if (!$user_ID): ?>
	<h3>You have to be logged in the view this page</h3>
<?php
else:
$profileuser = $userdata;  ?>
<h2><?php _e('Your profile'); ?></h2>
<?php /* gravatar_profile() */?>
<form name="profile" id="your-profile" action="http://www.yoursite.com/wp-admin/profile-update2.php" method="post">
<?php wp_nonce_field('update-profile_' . $user_ID) ?>
<p>
<input type="hidden" name="from" value="profile" />
<input type="hidden" name="checkuser_id" value="<?php echo $user_ID ?>" />
</p>

<?php _e('Name'); ?>
<p><label><?php _e('Username: (Locked)'); ?><br />
<input type="text" name="user_login" value="<?php echo $profileuser->user_login; ?>" disabled="disabled" />
</label></p>

<p><label><?php _e('First name:') ?><br />
<input type="text" name="first_name" value="<?php echo $profileuser->first_name ?>" /></label></p>

<p><label><?php _e('Last name:') ?><br />
<input type="text" name="last_name"  value="<?php echo $profileuser->last_name ?>" /></label></p>

<p><label><?php _e('Nickname:') ?><br />
<input type="text" name="nickname" value="<?php echo $profileuser->nickname ?>" /></label></p>

<p><label><?php _e('Display name:') ?> <br />
<select name="display_name">
<option value="<?php echo $profileuser->display_name; ?>"><?php echo $profileuser->display_name; ?></option>
<option value="<?php echo $profileuser->nickname ?>"><?php echo $profileuser->nickname ?></option>
<option value="<?php echo $profileuser->user_login ?>"><?php echo $profileuser->user_login ?></option>
<?php if ( !empty( $profileuser->first_name ) ) : ?>
<option value="<?php echo $profileuser->first_name ?>"><?php echo $profileuser->first_name ?></option>
<?php endif; ?>
<?php if ( !empty( $profileuser->last_name ) ) : ?>
<option value="<?php echo $profileuser->last_name ?>"><?php echo $profileuser->last_name ?></option>
<?php endif; ?>
<?php if ( !empty( $profileuser->first_name ) && !empty( $profileuser->last_name ) ) : ?>
<option value="<?php echo $profileuser->first_name." ".$profileuser->last_name ?>"><?php echo $profileuser->first_name." ".$profileuser->last_name ?></option>
<option value="<?php echo $profileuser->last_name." ".$profileuser->first_name ?>"><?php echo $profileuser->last_name." ".$profileuser->first_name ?></option>
<?php endif; ?>
</select></label></p>

<?php _e('Contact Info'); ?>

<p><label><?php _e('E-mail: (mandatory)') ?><br />
<input type="text" name="email" value="<?php echo $profileuser->user_email ?>" size=40/></label></p>

<p><label><?php _e('Website:') ?><br />
<input type="text" name="url" value="<?php echo $profileuser->user_url ?>" size=40/>
</label></p>

<p><label><?php _e('AIM:') ?><br />
<input type="text" name="aim" value="<?php echo $profileuser->aim ?>" size=40/>
</label></p>

<p><label><?php _e('Yahoo IM:') ?><br />
<input type="text" name="yim" value="<?php echo $profileuser->yim ?>" size=40/>
</label></p>

<p><label><?php _e('Jabber / Google Talk:') ?><br />
<input type="text" name="jabber" value="<?php echo $profileuser->jabber ?>" size=40/></label>
</p>

<br clear="all" />
<?php _e('Bio'); ?>
<p class="desc"><?php _e('Info about Jou.'); ?></p>
<p><textarea name="description" rows="10" cols="70"><?php echo $profileuser->description ?></textarea></p>

<?php
$show_password_fields = apply_filters('show_password_fields', true);
if ( $show_password_fields ) :
?>
<?php _e('Change password'); ?>
<p class="desc"><?php _e('Leave blank if you don't want to change it.'); ?></p>
<p><label><?php _e('New password:'); ?><br />
<input type="password" name="pass1" size="16" value="" />
</label></p>
<p><label><?php _e('Again:'); ?><br />
<input type="password" name="pass2" size="16" value="" />
</label></p>

<?php endif; ?>

<?php do_action('show_user_profile'); ?>

<br clear="all" />

<p class="submit">
<input type="submit" value="<?php _e('Update profile »') ?>" name="submit" />
</p>
</form>
<?php  endif; ?>

Instead of www.yoursite.com, you'll need to enther the url of your blog ofcourse. This is a pretty straightforward copy of the form used in /wp-admin/profile.php. Now, that's it for this file, save it in your theme folder, and never look back. Next you'll need to find the file profile-update.php in your /wp-admin folder, and copy this, name the copy profile-update2.php. In the copied file, find the lines (near the end of the file)

if ( 'profile' == $_POST['from'] )
	$to = 'profile.php?updated=true';
else
	$to = 'profile.php?updated=true';

And replace them with

if ( 'profile' == $_POST['from'] )
	$to = 'http://www.yoursite.com/profile/?updated=true';
else
	$to = 'http://www.yoursite.com/profile/?updated=true';

Again, instead of www.yoursite.com, you'll need to enther the url of your blog. Now, save this file in the /wp-admin folder.
And now, the last step; create a new page, title it profile, in the post frame enter some text, and for the page template choose profilepage. Publish it, and presto, you have a custom profile page.

 

3 Responses to “How to build a custom profile page in Wordpress”

  1. Ryan

    Thanks for the quick writeup on getting this going. Its helped me out with a small project. I did get it working for wordpress 2.2.
    I just removed this line $profileuser = $userdata;
    and changed every instance of $profileuser to $userdata and everything has been working very well.

  2. Simon

    I got it working for WordPress 2.3 too Ryan, and I thought I had updated this post. Guess not though. :D

Trackbacks

Leave a Reply