Create Profile Form Page with WordPress and Thesis

custom.css

/* PROFILE FORM ON FRONT */
.custom form#your-profile table {
	width:100%;
}
 
.custom form#your-profile table td span,.custom form#your-profile table td p.indicator-hint {
    clear:both;
    display:block;
    text-align:right;
}
 
.custom form#your-profile table th label {
    float:left;
}
 
.custom form#your-profile table td input[type="text"],.custom form#your-profile table td textarea,.custom form#your-profile table td select {
    float:right;
    width:98%;
}
 
.custom form#your-profile table td input[type="password"],.custom div#pass-strength-result {
	clear:both;
    float:right;
}
 
p.submit {
	text-align:center;
}

custom_functions.php

<?php
/* Theme My Profile form fix for thesis framework */
if ( class_exists( 'Theme_My_Profile' ) ) {
    class brand_profile extends Theme_My_Profile {
		function print_profile_form() {
			global $action, $redirect, $profile, $user_id, $wp_http_referer, $profileuser;
            wp_reset_vars( array( 'action', 'redirect', 'profile', 'user_id', 'wp_http_referer' ) );
            $wp_http_referer = remove_query_arg( array( 'update', 'delete_count' ), stripslashes( $wp_http_referer ) );
            $profileuser = get_user_to_edit( $this->current_user->ID ); ?>
            <form id="your-profile" action="<?php echo esc_url( $this->page_link ); ?>" method="post"<?php do_action( 'user_edit_form_tag' ); ?>>
            <?php wp_nonce_field( 'update-user_' . $this->current_user->ID ) ?>
            <?php if ( $wp_http_referer ) : ?>
                <input type="hidden" name="wp_http_referer" value="<?php echo esc_url( $wp_http_referer ); ?>" />
            <?php endif; ?>
            <p>
            <input type="hidden" name="from" value="profile" />
            <input type="hidden" name="checkuser_id" value="<?php echo $this->current_user->ID; ?>" />
            </p>
            <?php if ( has_action( 'personal_options' ) || has_filter( 'profile_personal_options' ) ) : ?>
            <h3><?php _e( 'Personal Options' ); ?></h3>
            <table class="form-table">
            <?php do_action( 'personal_options', $profileuser ); ?>
            </table>
            <?php do_action( 'profile_personal_options', $profileuser ); ?>
            <?php endif; ?>
            <h3><?php _e( 'Name' ) ?></h3>
            <table class="form-table">
            <tr>
                <th><label for="user_login"><?php _e( 'Username' ); ?></label></th>
                <td><input type="text" name="user_login" id="user_login" value="<?php echo esc_attr( $profileuser->user_login ); ?>" disabled="disabled" class="regular-text" /> <span class="description"><?php _e( 'Usernames cannot be changed.' ); ?></span></td>
            </tr>
            <tr>
                <th><label for="first_name"><?php _e( 'First name' ); ?></label></th>
                <td><input type="text" name="first_name" id="first_name" value="<?php echo esc_attr( $profileuser->first_name ); ?>" class="regular-text" /></td>
            </tr>
            <tr>
                <th><label for="last_name"><?php _e( 'Last name' ); ?></label></th>
                <td><input type="text" name="last_name" id="last_name" value="<?php echo esc_attr( $profileuser->last_name ); ?>" class="regular-text" /></td>
            </tr>
            <tr>
                <th><label for="nickname"><?php _e( 'Nickname' ); ?> <span class="description"><?php _e( '(required)' ); ?></span></label></th>
                <td><input type="text" name="nickname" id="nickname" value="<?php echo esc_attr( $profileuser->nickname ); ?>" class="regular-text" /></td>
            </tr>
            <tr>
                <th><label for="display_name"><?php _e( 'Display name publicly as' ) ?></label></th>
                <td>
					<select name="display_name" id="display_name">
					<?php
						$public_display = array();
						$public_display['display_username']  = $profileuser->user_login;
						$public_display['display_nickname']  = $profileuser->nickname;
						if ( !empty( $profileuser->first_name ) )
							$public_display['display_firstname'] = $profileuser->first_name;
						if ( !empty( $profileuser->last_name ) )
							$public_display['display_lastname'] = $profileuser->last_name;
						if ( !empty( $profileuser->first_name ) && !empty( $profileuser->last_name ) ) {
							$public_display['display_firstlast'] = $profileuser->first_name . ' ' . $profileuser->last_name;
							$public_display['display_lastfirst'] = $profileuser->last_name . ' ' . $profileuser->first_name;
						}
						if ( !in_array( $profileuser->display_name, $public_display ) ) // Only add this if it isn't duplicated elsewhere
							$public_display = array( 'display_displayname' => $profileuser->display_name ) + $public_display;
						$public_display = array_map( 'trim', $public_display );
						$public_display = array_unique( $public_display );
						foreach ( $public_display as $id => $item ) {
					?>
						<option id="<?php echo $id; ?>" value="<?php echo esc_attr( $item ); ?>"<?php selected( $profileuser->display_name, $item ); ?>><?php echo $item; ?></option>
					<?php
						}
					?>
					</select>
                </td>
            </tr>
            </table>
            <h3><?php _e( 'Contact Info' ) ?></h3>
            <table class="form-table">
            <tr>
                <th><label for="email"><?php _e( 'E-mail' ); ?> <span class="description"><?php _e( '(required)' ); ?></span></label></th>
                <td><input type="text" name="email" id="email" value="<?php echo esc_attr( $profileuser->user_email ); ?>" class="regular-text" /></td>
            </tr>
            <tr>
                <th><label for="url"><?php _e( 'Website' ); ?></label></th>
                <td><input type="text" name="url" id="url" value="<?php echo esc_attr( $profileuser->user_url ); ?>" class="regular-text code" /></td>
            </tr>
            <?php if ( function_exists( '_wp_get_user_contactmethods' ) ) :
                foreach ( _wp_get_user_contactmethods() as $name => $desc ) {
            ?>
            <tr>
                <th><label for="<?php echo $name; ?>"><?php echo apply_filters( 'user_'.$name.'_label', $desc ); ?></label></th>
                <td><input type="text" name="<?php echo $name; ?>" id="<?php echo $name; ?>" value="<?php echo esc_attr( $profileuser->$name ); ?>" class="regular-text" /></td>
            </tr>
            <?php
                }
				endif;
            ?>
            </table>
            <h3><?php _e( 'About Yourself' ); ?></h3>
            <table class="form-table">
            <tr>
                <th><label for="description"><?php _e( 'Biographical Info' ); ?></label></th>
                <td><textarea name="description" id="description" rows="5" cols="30"><?php echo esc_html( $profileuser->description ); ?></textarea><br />
                <span class="description"><?php _e( 'Share a little biographical information to fill out your profile. This may be shown publicly.' ); ?></span></td>
            </tr>
            <?php
            $show_password_fields = apply_filters( 'show_password_fields', true, $profileuser );
            if ( $show_password_fields ) :
            ?>
			<tr id="password">
				<th><label for="pass1"><?php _e( 'New Password' ); ?></label></th>
				<td>
					<span class="description"><?php _e( 'If you would like to change the password type a new one. Otherwise leave this blank.' ); ?></span>
					<input type="password" name="pass1" id="pass1" size="16" value="" autocomplete="off" />
					<span class="description"><?php _e( 'Type your new password again.' ); ?></span>
					<input type="password" name="pass2" id="pass2" size="16" value="" autocomplete="off" />
					<div id="pass-strength-result"><?php _e( 'Strength indicator' ); ?></div>
					<p class="description indicator-hint"><?php _e( 'Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers and symbols like ! " ? $ % ^ &amp; ).' ); ?></p>
				</td>
			</tr>
            <?php endif; ?>
            </table>
            <?php do_action( 'show_user_profile', $profileuser ); ?>
            <?php if ( count( $profileuser->caps ) > count( $profileuser->roles ) && apply_filters( 'additional_capabilities_display', true, $profileuser ) ) { ?>
            <br class="clear" />
                <table width="99%" style="border: none;" cellspacing="2" cellpadding="3" class="editform">
                    <tr>
                        <th scope="row"><?php _e( 'Additional Capabilities' ) ?></th>
                        <td><?php
						global $wp_roles;
                        $output = '';
                        foreach ( $profileuser->caps as $cap => $value ) {
                            if ( !$wp_roles->is_role( $cap ) ) {
                                if ( $output != '' )
                                    $output .= ', ';
                                $output .= $value ? $cap : "Denied: {$cap}";
                            }
                        }
                        echo $output;
                        ?></td>
                    </tr>
                </table>
            <?php } ?>
            <p class="submit">
                <input type="hidden" name="action" value="update" />
                <input type="hidden" name="user_id" id="user_id" value="<?php echo esc_attr( $this->current_user->ID ); ?>" />
                <input type="submit" class="button-primary form_submit" value="<?php esc_attr_e( 'Update Profile' ); ?>" name="submit" />
            </p>
            </form>
            </div>
            <?php
        }
	}
$brand_profile = new brand_profile();
}
?>

instructions.txt

Summary :

Creating “Edit Your Profile” page
Adding profile form to that page
Adapting the profile form to be used in Thesis Theme
Styling the profile form with CSS
Adding “Login / Logout / Your Profile / Admin area” links to your website
Styling “Members Menu” with CSS
How to modify user’s contact information fields, so that they match your needs
step 1 : Creating “Edit Your Profile” page

Enter your admin area
Open “Pages” tab in the left sidebar, click “Add new”
in order to create a page for the profile form, visible on the front side of your web site
Give it a name “Profile”.
Make sure under “SEO” section of Thesis you have checked the options “noindex”, “noarchive” in order to block search engines (they have nothing to do with this page, as it is a “functionnal page” of your site).
If you like to have some text to be displayed at the top of this page – you may easily add the content in the editor box.
Hit “Publish” button on your right.
Now we could pass to the next step :

step 2 : Adding profile form to that page

To add the form you’ll be collecting user’s information with, I’m using a good plugin : Theme My Profile by Jeff. Yes, I do know you guys have bought Thesis Theme to skip using plugins in the favor of custom_functions.php file… Know what I think about this ?

Sometimes a good plugin is so f…g better and more flexible than a poorly cooded custom PHP function you might grab on DIYthemes forums…

Really guys, if you know how to make difference between a good PHP code and a piece of sh.t – you know what i mean. I’ve checked the code of the Jeff’s plugin, it is smart, flexible and it does what it is asked for. So don’t worry, go grab the plugin, install it, check the plugin settings under “Settings” -> “Theme My Profile” (nothing, complicated, just make sure you do not check the option “admin” under “block admin area for :” section… that’s it) . Here is the screenshot of the options ( you may disable the theme-my-profile stylesheet as well, we are going to style it later) :

So, once the plugin is activated – make sure of two points :

Your “Profile” page ID is the same that in the plugin settings (normally the plugin detects the page automatically, otherwise you add the id manually and update plugin options)
You have added this shortcode to the page content (while editing page in the “HTML” mode, not “Visual”) :
[theme-my-profile]
This short code will display your form.

We are done with this step, now we’ll use some php stuff to make it work even better.

step 3 : Adapting the profile form to be used in Thesis Theme

By default, the profile form rendered by the plugin looks a bit weird on the front side of a Thesis site. Especially the “New Password” section and submitt button. Hopefully, the plugin is flexible enough, so we will overwrite the form HTML without even touching the plugin core file. Doing this way, we preserve compatibility with future releases of the plugin (if we “core-hack” the plugin file – after the next update we will need to do it once again, I’m too lazy to do the same job twice  ).

Here is the php code to add to your custom_functions.php file. Simple copy-paste-hit “Big Ass Save Button” – you’re done.