UPDATE
This tutorial, while providing a good introduction to the concept, hasn’t been updated since it was written.
To this end we’ve written a free plugin that let’s you add all these front-end forms through the easy use of shortcodes: Profile Builder
I’ve been playing a lot lately with the user registration template (I’ve used it as a great starting point) from Justin Tadlock’s ThemeHybrid and extended it to support custom user profiles.
Unfortunately, user management in WordPress isn’t the sharpest tool in the shed. You have a lot of functionality for the users in the backend, but if you want to do extend that functionality to the front-end you’re in for a rough time.
There are some really nice tutorials that can help you add custom user profile fields in the backend, but if you try to do it to the frontend through a custom page template you’ll find your self validating a lot of fields and there’s even a twist to the entire process that makes things interesting.
Yet Another Thematic Childtheme
For the purpose of this tutorial will create a new Thematic child theme. Most of the code will go into the functions.php file and the individual template pages. If you’re new to this just use the child theme that comes with Thematic.
So let us have a look at what we’re building.
WordPress Extra Profile Fields
First of all, we want some extra profile fields in the back-end. We do this by simply adding input fields to the following two hooks: show_user_profile and edit_user_profile. We need both hooks because we want the users to be able to edit their own extra profile fields and we also want the admin to be able to edit other user’s extra profile fields.
add_action( 'show_user_profile', 'show_extra_profile_fields', 10 ); add_action( 'edit_user_profile', 'show_extra_profile_fields', 10 ); function show_extra_profile_fields( $user ) { ?> <input type="text" name="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" /> <?php } |
In addition to this, we also need to save our data. This is done by hooking to personal_options_update and edit_user_profile_update. Both hooks are needed for the same reason two hooks were needed when adding the extra input 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( $user_id ) { if ( !current_user_can( 'edit_user', $user_id ) ) return false; update_usermeta( $user_id, 'twitter', $_POST['twitter'] ); } |
This is what your entire functions.php file should contain:
<?php // // Custom Child Theme Functions // add_action( 'show_user_profile', 'show_extra_profile_fields', 10 ); add_action( 'edit_user_profile', 'show_extra_profile_fields', 10 ); function show_extra_profile_fields( $user ) { ?> <h3><?php _e('Extra Profile Information', 'frontendprofile'); ?></h3> <table class="form-table"> <tr> <th><label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></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"><?php _e('Please enter your Twitter account.', 'frontendprofile'); ?></span> </td> </tr> <tr> <th><label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label></th> <td> <?php for($i=1900; $i<=2000; $i++) $years[]=$i; echo '<select name="birth">'; echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>'; foreach($years as $year){ $selected = ''; if( $year == get_the_author_meta( 'birth', $user->ID ) ) $selected = 'selected="slelected"'; echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>'; } echo '</select>'; ?> <span class="description"><?php _e('Please select the year of your birth.', 'frontendprofile'); ?></span> </td> </tr> <tr> <th><label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label></th> <td> <?php $hobbies = get_the_author_meta( 'hobbies', $user->ID ); ?> <ul> <li><input value="videogames" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("videogames", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games', 'frontendprofile'); ?></li> <li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("sabotagingcapitalism", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li> <li><input value="watchingtv" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("watchingtv", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV', 'frontendprofile'); ?></li> </ul> </td> </tr> <tr> <th><label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label></th> <td> <?php $agree = get_the_author_meta( 'agree', $user->ID ); ?> <ul> <li><input value="yes" name="agree" <?php if ($agree == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li> <li><input value="no" name="agree" <?php if ($agree == 'no' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No', 'frontendprofile'); ?></li> </ul> </td> </tr> </table> <?php } add_action( 'personal_options_update', 'save_extra_profile_fields' ); add_action( 'edit_user_profile_update', 'save_extra_profile_fields' ); function save_extra_profile_fields( $user_id ) { if ( !current_user_can( 'edit_user', $user_id ) ) return false; update_usermeta( $user_id, 'twitter', $_POST['twitter'] ); update_usermeta( $user_id, 'birth', $_POST['birth'] ); update_usermeta( $user_id, 'hobbies', $_POST['hobbies'] ); update_usermeta( $user_id, 'agree', $_POST['agree'] ); } |
The templates
Edit Profile Template
All right. With this out of the way, we can start working on our awesome templates. Let’s start with the Edit Profile Template. First of all, we need a form with all the input fields (both the default ones and our extra fields).
<form method="post" action="<?php the_permalink(); ?>"> <p class="form-twitter"> <label for="twitter">Twitter</label> <input name="twitter" type="text" value="<?php the_author_meta( 'twitter', $current_user->id ); ?>" /> </p><!-- .form-twitter --> <p class="form-submit"> <input name="updateuser" type="submit" id="updateuser" class="submit button" value="Update" /> <?php wp_nonce_field( 'update-user' ) ?> <input name="action" type="hidden" id="action" value="update-user" /> </p><!-- .form-submit --> </form> |
Then, we need to update the user meta-data accordingly when needed. All can be summed up to the following snippet:
<?php /* Get user info. */ global $current_user; get_currentuserinfo(); /* Load the registration file. */ require_once( ABSPATH . WPINC . '/registration.php' ); /* If profile was saved, update profile. */ if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) { update_usermeta( $current_user->id, 'twitter', esc_attr( $_POST['twitter'] ) ); } ?> |
Notice that loading the registration file found in wp-includes is an absolute must.
Here is the entire edit profile page template for your Thematic Child Theme.
<?php /** * Template Name: Edit Profile Page * */ /* Get user info. */ global $current_user, $wp_roles; get_currentuserinfo(); /* Load the registration file. */ require_once( ABSPATH . WPINC . '/registration.php' ); require_once( ABSPATH . 'wp-admin/includes' . '/template.php' ); // this is only for the selected() function /* If profile was saved, update profile. */ if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) { /* Update user password. */ if ( !empty($_POST['pass1'] ) && !empty( $_POST['pass2'] ) ) { if ( $_POST['pass1'] == $_POST['pass2'] ) wp_update_user( array( 'ID' => $current_user->id, 'user_pass' => esc_attr( $_POST['pass1'] ) ) ); else $error = __('The passwords you entered do not match. Your password was not updated.', 'frontendprofile'); } /* Update user information. */ update_usermeta( $current_user->id, 'first_name', esc_attr( $_POST['first_name'] ) ); update_usermeta( $current_user->id, 'last_name', esc_attr( $_POST['last_name'] ) ); if ( !empty( $_POST['nickname'] ) ) update_usermeta( $current_user->id, 'nickname', esc_attr( $_POST['nickname'] ) ); update_usermeta( $current_user->id, 'display_name', esc_attr( $_POST['display_name'] ) ); if ( !empty( $_POST['email'] ) ) update_usermeta( $current_user->id, 'user_email', esc_attr( $_POST['email'] ) ); if(strpos($_POST['website'], 'ttp://') || empty( $_POST['website'] )) update_usermeta( $current_user->id, 'user_url', esc_attr( $_POST['website'] ) ); else update_usermeta( $current_user->id, 'user_url', 'http://' . esc_attr( $_POST['website'] ) ); update_usermeta( $current_user->id, 'aim', esc_attr( $_POST['aim'] ) ); update_usermeta( $current_user->id, 'yim', esc_attr( $_POST['yim'] ) ); update_usermeta( $current_user->id, 'jabber', esc_attr( $_POST['jabber'] ) ); update_usermeta( $current_user->id, 'description', esc_attr( $_POST['description'] ) ); // Extra Profile Information update_usermeta( $current_user->id, 'twitter', esc_attr( $_POST['twitter'] ) ); update_usermeta( $current_user->id, 'birth', esc_attr( $_POST['birth'] ) ); update_usermeta( $current_user->id, 'hobbies', $_POST['hobbies'] ); update_usermeta( $current_user->id, 'agree', esc_attr( $_POST['agree'] ) ); /* Redirect so the page will show updated info. */ if ( !$error ) { wp_redirect( get_permalink() ); exit; } } // calling the header.php get_header(); // action hook for placing content above #container thematic_abovecontainer(); ?> <div id="container"> <div id="content"> <?php // calling the widget area 'page-top' get_sidebar('page-top'); the_post(); ?> <div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>"> <?php // creating the post header thematic_postheader(); ?> <div class="entry-content"> <?php the_content(); wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number'); edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?> </div> </div><!-- .post --> <!-- EDIT PROFILE STARTS HERE --> <?php if ( !is_user_logged_in() ) : ?> <p class="warning"> <?php _e('You must be logged in to edit your profile.', 'frontendprofile'); ?> </p><!-- .warning --> <?php else : ?> <?php if ( $error ) echo '<p class="error">' . $error . '</p>'; ?> <form method="post" id="edituser" class="user-forms" action="<?php the_permalink(); ?>"> <strong>Name</strong> <p class="first_name"> <label for="first_name"><?php _e('First Name', 'frontendprofile'); ?></label> <input class="text-input" name="first_name" type="text" id="first_name" value="<?php the_author_meta( 'first_name', $current_user->id ); ?>" /> </p><!-- .first_name --> <p class="last_name"> <label for="last_name"><?php _e('Last Name', 'frontendprofile'); ?></label> <input class="text-input" name="last_name" type="text" id="last_name" value="<?php the_author_meta( 'last_name', $current_user->id ); ?>" /> </p><!-- .last_name --> <p class="nickname"> <label for="nickname"><?php _e('Nickname (required)', 'frontendprofile'); ?></label> <input class="text-input" name="nickname" type="text" id="nickname" value="<?php the_author_meta( 'nickname', $current_user->id ); ?>" /> </p><!-- .nickname --> <p class="display_name"> <label for="display_name"><?php _e('Display Name', 'frontendprofile'); ?></label> <select name="display_name" id="display_name"> <?php $public_display = array(); $public_display['display_nickname'] = $current_user->nickname; $public_display['display_username'] = $current_user->user_login; if ( !empty($current_user->first_name) ) $public_display['display_firstname'] = $current_user->first_name; if ( !empty($current_user->last_name) ) $public_display['display_lastname'] = $current_user->last_name; if ( !empty($current_user->first_name) && !empty($current_user->last_name) ) { $public_display['display_firstlast'] = $current_user->first_name . ' ' . $current_user->last_name; $public_display['display_lastfirst'] = $current_user->last_name . ' ' . $current_user->first_name; } if ( !in_array( $current_user->display_name, $public_display ) )// Only add this if it isn't duplicated elsewhere $public_display = array( 'display_displayname' => $current_user->display_name ) + $public_display; $public_display = array_map( 'trim', $public_display ); foreach ( $public_display as $id => $item ) { ?> <option id="<?php echo $id; ?>" value="<?php echo esc_attr($item); ?>"<?php selected( $current_user->display_name, $item ); ?>><?php echo $item; ?></option> <?php } ?> </select> </p><!-- .display_name --> <strong>Contact Info</strong> <p class="form-email"> <label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label> <input class="text-input" name="email" type="text" id="email" value="<?php the_author_meta( 'user_email', $current_user->id ); ?>" /> </p><!-- .form-email --> <p class="form-website"> <label for="website"><?php _e('Website', 'frontendprofile'); ?></label> <input class="text-input" name="website" type="text" id="website" value="<?php the_author_meta( 'user_url', $current_user->id ); ?>" /> </p><!-- .form-website --> <p class="form-aim"> <label for="aim"><?php _e('AIM', 'frontendprofile'); ?></label> <input class="text-input" name="aim" type="text" id="aim" value="<?php the_author_meta( 'aim', $current_user->id ); ?>" /> </p><!-- .form-aim --> <p class="form-yim"> <label for="yim"><?php _e('Yahoo IM', 'frontendprofile'); ?></label> <input class="text-input" name="yim" type="text" id="yim" value="<?php the_author_meta( 'yim', $current_user->id ); ?>" /> </p><!-- .form-yim --> <p class="form-jabber"> <label for="jabber"><?php _e('Jabber / Google Talk', 'frontendprofile'); ?></label> <input class="text-input" name="jabber" type="text" id="jabber" value="<?php the_author_meta( 'jabber', $current_user->id ); ?>" /> </p><!-- .form-jabber --> <strong>About Yourself</strong> <p class="form-description"> <label for="description"><?php _e('Biographical Info', 'frontendprofile'); ?></label> <textarea class="text-input" name="description" id="description" rows="5" cols="30"><?php echo the_author_meta( 'description', $current_user->id ); ?></textarea> </p><!-- .form-description --> <p class="form-password"> <label for="pass1"><?php _e('New Password', 'frontendprofile'); ?> </label> <input class="text-input" name="pass1" type="password" id="pass1" /> </p><!-- .form-password --> <p class="form-password"> <label for="pass2"><?php _e('Repeat Password', 'frontendprofile'); ?></label> <input class="text-input" name="pass2" type="password" id="pass2" /> </p><!-- .form-password --> <strong>Extra Profile Information</strong> <p class="form-twitter"> <label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label> <input class="text-input" name="twitter" type="text" id="twitter" value="<?php the_author_meta( 'twitter', $current_user->id ); ?>" /> </p><!-- .form-twitter --> <p class="form-birth"> <label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label> <?php for($i=1900; $i<=2000; $i++) $years[]=$i; echo '<select name="birth">'; echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>'; foreach($years as $year){ $the_year = get_the_author_meta( 'birth', $current_user->id ); if($year == $the_year ) $selected = 'selected="slelected"'; else $selected = ''; echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>'; } echo '</select>'; ?> </p><!-- .form-birth --> <p class="form-hobbies"> <label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label> <?php $hobbies = get_the_author_meta( 'hobbies', $current_user->id ); ?> <ul class="hobbies-type-list"> <li><input value="videogames" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("videogames", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games', 'frontendprofile'); ?></li> <li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("sabotagingcapitalism", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li> <li><input value="watchingtv" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("watchingtv", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV', 'frontendprofile'); ?></li> </ul> </p><!-- .form-hobbies --> <p class="form-agree"> <label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label> <?php $agree = get_the_author_meta( 'agree', $current_user->ID ); ?> <ul> <li><input value="yes" name="agree" <?php if ($agree == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li> <li><input value="no" name="agree" <?php if ($agree == 'no' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No', 'frontendprofile'); ?></li> </ul> </p><!-- .form-agree --> <p class="form-submit"> <?php echo $referer; ?> <input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Update', 'frontendprofile'); ?>" /> <?php wp_nonce_field( 'update-user' ) ?> <input name="action" type="hidden" id="action" value="update-user" /> </p><!-- .form-submit --> </form><!-- #edituser --> <?php endif; ?> <!-- EDIT PROFILE ENDS HERE --> <?php if ( get_post_custom_values('comments') ) thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages! // calling the widget area 'page-bottom' get_sidebar('page-bottom'); ?> </div><!-- #content --> </div><!-- #container --> <?php // action hook for placing content below #container thematic_belowcontainer(); // calling the standard sidebar thematic_sidebar(); // calling footer.php get_footer(); ?> |
User Registration Page Template
Next, let’s take a look at the Register Template. Similar to the Edit Profile Template, we need a form with all our input fields.
<?php if ( $error ) : ?> <p class="error"> <?php echo $error; ?> </p><!-- .error --> <?php endif; ?> <form method="post" id="adduser" class="user-forms" action="http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>"> <p class="form-username"> <label for="user_name"><?php _e('Username (required)', 'frontendprofile'); ?></label> <input name="user_name" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['user_name'], 1 ); ?>" /> </p><!-- .form-username --> <p class="form-email"> <label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label> <input name="email" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['email'], 1 ); ?>" /> </p><!-- .form-email --> <p class="form-twitter"> <label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label> <input name="twitter" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['twitter'], 1 ); ?>" /> </p><!-- .form-twitter --> <p class="form-submit"> <input name="adduser" type="submit" id="addusersub" class="submit button" value="<?php if ( current_user_can( 'create_users' ) ) _e('Add User', 'frontendprofile'); else _e('Register', 'frontendprofile'); ?>" /> <?php wp_nonce_field( 'add-user' ) ?> <input name="action" type="hidden" id="action" value="adduser" /> </p><!-- .form-submit --> </form><!-- #adduser --> |
Then, when a registration actually occurs, we need to:
- create a user with all the default fields of meta-data;
- separately add the extra meta-data fields;
- mail the password to the new user.
Reduced to a bare minimum, this is how the code looks like:
<?php /* Load registration file. */ require_once( ABSPATH . WPINC . '/registration.php' ); /* If user registered, input info. */ if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'adduser' ) { $user_pass = wp_generate_password(); $userdata = array( 'user_pass' => $user_pass, 'user_login' => esc_attr( $_POST['user_name'] ), 'user_email' => esc_attr( $_POST['email'] ), ); if ( !$userdata['user_login'] ) $error = __('A username is required for registration.', 'frontendprofile'); elseif ( username_exists($userdata['user_login']) ) $error = __('Sorry, that username already exists!', 'frontendprofile'); elseif ( !is_email($userdata['user_email'], true) ) $error = __('You must enter a valid email address.', 'frontendprofile'); elseif ( email_exists($userdata['user_email']) ) $error = __('Sorry, that email address is already used!', 'frontendprofile'); else{ $new_user = wp_insert_user( $userdata ); update_usermeta( $new_user, 'twitter', esc_attr( $_POST['twitter'] ) ); wp_new_user_notification($new_user, $user_pass); } } ?> |
Notice the included error reporting features.
Another thing that we should mention is the update_usermeta function. We need to call it because wp_insert_user function doesn’t take into account extra fields.
Here is the entire registration page template for your Thematic Child Theme.
<?php /** * Template Name: Register Page * */ /* Load registration file. */ require_once( ABSPATH . WPINC . '/registration.php' ); /* Check if users can register. */ $registration = get_option( 'users_can_register' ); /* If user registered, input info. */ if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'adduser' ) { $user_pass = wp_generate_password(); $userdata = array( 'user_pass' => $user_pass, 'user_login' => esc_attr( $_POST['user_name'] ), 'first_name' => esc_attr( $_POST['first_name'] ), 'last_name' => esc_attr( $_POST['last_name'] ), 'nickname' => esc_attr( $_POST['nickname'] ), 'user_email' => esc_attr( $_POST['email'] ), 'user_url' => esc_attr( $_POST['website'] ), 'aim' => esc_attr( $_POST['aim'] ), 'yim' => esc_attr( $_POST['yim'] ), 'jabber' => esc_attr( $_POST['jabber'] ), 'description' => esc_attr( $_POST['description'] ), 'role' => get_option( 'default_role' ), ); if ( !$userdata['user_login'] ) $error = __('A username is required for registration.', 'frontendprofile'); elseif ( username_exists($userdata['user_login']) ) $error = __('Sorry, that username already exists!', 'frontendprofile'); elseif ( !is_email($userdata['user_email'], true) ) $error = __('You must enter a valid email address.', 'frontendprofile'); elseif ( email_exists($userdata['user_email']) ) $error = __('Sorry, that email address is already used!', 'frontendprofile'); else{ $new_user = wp_insert_user( $userdata ); wp_new_user_notification($new_user, $user_pass); update_usermeta( $new_user, 'twitter', esc_attr( $_POST['twitter'] ) ); update_usermeta( $new_user, 'birth', esc_attr( $_POST['birth'] ) ); update_usermeta( $new_user, 'hobbies', $_POST['hobbies'] ); update_usermeta( $new_user, 'agree', esc_attr( $_POST['agree'] ) ); } } // calling the header.php get_header(); // action hook for placing content above #container thematic_abovecontainer(); ?> <div id="container"> <div id="content"> <?php // calling the widget area 'page-top' get_sidebar('page-top'); the_post(); ?> <div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>"> <?php // creating the post header thematic_postheader(); ?> <div class="entry-content"> <?php the_content(); wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number'); edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?> </div> </div><!-- .post --> <!-- REGISTER FORM STARTS HERE --> <?php if ( is_user_logged_in() && !current_user_can( 'create_users' ) ) : ?> <p class="log-in-out alert"> <?php printf( __('You are logged in as <a href="%1$s" title="%2$s">%2$s</a>. You don\'t need another account.', 'frontendprofile'), get_author_posts_url( $curauth->ID ), $user_identity ); ?> <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="<?php _e('Log out of this account', 'frontendprofile'); ?>"><?php _e('Logout »', 'frontendprofile'); ?></a> </p><!-- .log-in-out .alert --> <?php elseif ( $new_user ) : ?> <p class="alert"> <?php if ( current_user_can( 'create_users' ) ) printf( __('A user account for %1$s has been created.', 'frontendprofile'), $_POST['user-name'] ); else printf( __('Thank you for registering, %1$s.', 'frontendprofile'), $_POST['user-name'] ); printf( __('<br/>Please check your email address. That\'s where you\'ll recieve your login password.<br/> (It might go into your spam folder)', 'frontendprofile') ); ?> </p><!-- .alert --> <?php else : ?> <?php if ( $error ) : ?> <p class="error"> <?php echo $error; ?> </p><!-- .error --> <?php endif; ?> <?php if ( current_user_can( 'create_users' ) && $registration ) : ?> <p class="alert"> <?php _e('Users can register themselves or you can manually create users here.', 'frontendprofile'); ?> </p><!-- .alert --> <?php elseif ( current_user_can( 'create_users' ) ) : ?> <p class="alert"> <?php _e('Users cannot currently register themselves, but you can manually create users here.', 'frontendprofile'); ?> </p><!-- .alert --> <?php endif; ?> <?php if ( $registration || current_user_can( 'create_users' ) ) : ?> <form method="post" id="adduser" class="user-forms" action="http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>"> <strong>Name</strong> <p class="form-username"> <label for="user_name"><?php _e('Username (required)', 'frontendprofile'); ?></label> <input class="text-input" name="user_name" type="text" id="user_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['user_name'], 1 ); ?>" /> </p><!-- .form-username --> <p class="first_name"> <label for="first_name"><?php _e('First Name', 'frontendprofile'); ?></label> <input class="text-input" name="first_name" type="text" id="first_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['first_name'], 1 ); ?>" /> </p><!-- .first_name --> <p class="last_name"> <label for="last_name"><?php _e('Last Name', 'frontendprofile'); ?></label> <input class="text-input" name="last_name" type="text" id="last_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['last_name'], 1 ); ?>" /> </p><!-- .last_name --> <p class="nickname"> <label for="nickname"><?php _e('Nickname', 'frontendprofile'); ?></label> <input class="text-input" name="nickname" type="text" id="nickname" value="<?php if ( $error ) echo wp_specialchars( $_POST['nickname'], 1 ); ?>" /> </p><!-- .nickname --> <strong>Contact Info</strong> <p class="form-email"> <label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label> <input class="text-input" name="email" type="text" id="email" value="<?php if ( $error ) echo wp_specialchars( $_POST['email'], 1 ); ?>" /> </p><!-- .form-email --> <p class="form-website"> <label for="website"><?php _e('Website', 'frontendprofile'); ?></label> <input class="text-input" name="website" type="text" id="website" value="<?php if ( $error ) echo wp_specialchars( $_POST['website'], 1 ); ?>" /> </p><!-- .form-website --> <p class="form-aim"> <label for="aim"><?php _e('AIM', 'frontendprofile'); ?></label> <input class="text-input" name="aim" type="text" id="aim" value="<?php if ( $error ) echo wp_specialchars( $_POST['aim'], 1 ); ?>" /> </p><!-- .form-aim --> <p class="form-yim"> <label for="yim"><?php _e('Yahoo IM', 'frontendprofile'); ?></label> <input class="text-input" name="yim" type="text" id="yim" value="<?php if ( $error ) echo wp_specialchars( $_POST['yim'], 1 ); ?>" /> </p><!-- .form-yim --> <p class="form-jabber"> <label for="jabber"><?php _e('Jabber / Google Talk', 'frontendprofile'); ?></label> <input class="text-input" name="jabber" type="text" id="jabber" value="<?php if ( $error ) echo wp_specialchars( $_POST['jabber'], 1 ); ?>" /> </p><!-- .form-jabber --> <strong>About Yourself</strong> <p class="form-description"> <label for="description"><?php _e('Biographical Info', 'frontendprofile'); ?></label> <textarea class="text-input" name="description" id="description" rows="5" cols="30"><?php if ( $error ) echo wp_specialchars( $_POST['description'], 1 ); ?></textarea> </p><!-- .form-description --> <strong>Extra Profile Information</strong> <p class="form-twitter"> <label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label> <input class="text-input" name="twitter" type="text" id="twitter" value="<?php if ( $error ) echo wp_specialchars( $_POST['twitter'], 1 ); ?>" /> </p><!-- .form-twitter --> <p class="form-birth"> <label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label> <?php for($i=1900; $i<=2000; $i++) $years[]=$i; echo '<select name="birth">'; echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>'; foreach($years as $year){ if ($error && $year==$_POST['birth']) $selected = 'selected="slelected"'; else $selected = ''; echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>'; } echo '</select>'; ?> </p><!-- .form-birth --> <p class="form-hobbies"> <label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label> <?php $hobbies = get_the_author_meta( 'hobbies', $current_user->id ); ?> <ul class="hobbies-type-list"> <li><input value="videogames" name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("videogames", $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games', 'frontendprofile'); ?></li> <li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("sabotagingcapitalism", $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li> <li><input value="watchingtv" name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("watchingtv", $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV', 'frontendprofile'); ?></li> </ul> </p><!-- .form-hobbies --> <p class="form-agree"> <label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label> <?php $agree = get_the_author_meta( 'agree', $current_user->ID ); ?> <ul> <li><input value="yes" name="agree" <?php if ($_POST['agree'] == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li> <li><input value="no" name="agree" <?php if ($_POST['agree'] == 'no' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No', 'frontendprofile'); ?></li> </ul> </p><!-- .form-agree --> <p class="form-submit"> <?php echo $referer; ?> <input name="adduser" type="submit" id="addusersub" class="submit button" value="<?php if ( current_user_can( 'create_users' ) ) _e('Add User', 'frontendprofile'); else _e('Register', 'frontendprofile'); ?>" /> <?php wp_nonce_field( 'add-user' ) ?> <input name="action" type="hidden" id="action" value="adduser" /> </p><!-- .form-submit --> </form><!-- #adduser --> <?php endif; ?> <?php endif; ?> <!-- REGISTER FORM ENDS HERE --> <?php if ( get_post_custom_values('comments') ) thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages! // calling the widget area 'page-bottom' get_sidebar('page-bottom'); ?> </div><!-- #content --> </div><!-- #container --> <?php // action hook for placing content below #container thematic_belowcontainer(); // calling the standard sidebar thematic_sidebar(); // calling footer.php get_footer(); |
User Log-In Page Template
The third and last template is the Log-In Template. Much of it was inspired by Justin Tadlock’s work and it basically consists of the form with the username and password fields and the wp_signon() function at the top that actually does all the dirty work.
<?php /** * Template Name: Log In Page * */ if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'log-in' ) : global $error; $login = wp_login( $_POST['user-name'], $_POST['password'] ); $login = wp_signon( array( 'user_login' => $_POST['user-name'], 'user_password' => $_POST['password'], 'remember' => $_POST['remember-me'] ), false ); endif; // calling the header.php get_header(); // action hook for placing content above #container thematic_abovecontainer(); ?> <div id="container"> <div id="content"> <?php // calling the widget area 'page-top' get_sidebar('page-top'); the_post(); ?> <div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>"> <?php // creating the post header thematic_postheader(); ?> <div class="entry-content"> <?php the_content(); wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number'); edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?> </div> </div><!-- .post --> <!-- LOGIN STARTS HERE --> <?php if ( is_user_logged_in() ) : // Already logged in ?> <?php global $user_ID; $login = get_userdata( $user_ID ); ?> <p class="alert"> <?php printf( __('You are currently logged in as <a href="%1$s" title="%2$s">%2$s</a>.', 'frontendprofile'), get_author_posts_url( $login->ID ), $login->display_name ); ?> <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="<?php _e('Log out of this account', 'frontendprofile'); ?>"><?php _e('Log out »', 'frontendprofile'); ?></a> </p><!-- .alert --> <?php elseif ( $login->ID ) : // Successful login ?> <?php $login = get_userdata( $login->ID ); ?> <p class="alert"> <?php printf( __('You have successfully logged in as <a href="%1$s" title="%2$s">%2$s</a>.', 'frontendprofile'), get_author_posts_url( $login->ID ), $login->display_name ); ?> </p><!-- .alert --> <?php else : // Not logged in ?> <?php if ( $error ) : ?> <p class="error"> <?php echo $error; ?> </p><!-- .error --> <?php endif; ?> <form action="<?php the_permalink(); ?>" method="post" class="sign-in"> <p class="login-form-username"> <label for="user-name"><?php _e('Username', 'frontendprofile'); ?></label> <input type="text" name="user-name" id="user-name" class="text-input" value="<?php echo wp_specialchars( $_POST['user-name'], 1 ); ?>" /> </p><!-- .form-username --> <p class="login-form-password"> <label for="password"><?php _e('Password', 'frontendprofile'); ?></label> <input type="password" name="password" id="password" class="text-input" /> </p><!-- .form-password --> <p class="login-form-submit"> <input type="submit" name="submit" class="submit button" value="<?php _e('Log in', 'frontendprofile'); ?>" /> <input class="remember-me checkbox" name="remember-me" id="remember-me" type="checkbox" checked="checked" value="forever" /> <label for="remember-me"><?php _e('Remember me', 'frontendprofile'); ?></label> <input type="hidden" name="action" value="log-in" /> </p><!-- .form-submit --> <p> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=lostpassword"><?php _e('Lost password?', 'frontendprofile'); ?></a> </p> </form><!-- .sign-in --> <?php endif; ?> <!-- LOGIN ENDS HERE --> <?php if ( get_post_custom_values('comments') ) thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages! // calling the widget area 'page-bottom' get_sidebar('page-bottom'); ?> </div><!-- #content --> </div><!-- #container --> <?php // action hook for placing content below #container thematic_belowcontainer(); // calling the standard sidebar thematic_sidebar(); // calling footer.php get_footer(); |
Conclusions
WordPress dose allow you to add any kind of fields to your user profile. It’s not very developer friendly and there’s a lot of validations that we need to do but it is possible and that’s all that matters if you ask me.
We need an UI in the core of WordPress for this, but probably we won’t have anything like this for quite a while.
The funny thing is that BuddyPress has a plugin that let’s you create extra user fields and displays them in the front end, but not in the backend. And we also have a plugin that is called Cimy User Extra Fields that creates the extra fields for the backend but it’s still more a developer’s tool and not that easy to use for the standard user. But there isn’t any real integration so that’s the bad thing.
The way this should work in an ideal word would be for us to have an UI in the backend and page templates that come with the default WordPress theme so developers can build on top of that (similar to the comments form).
Extra Struff
You can follow the tutorial to create your Extra User Fields or you can just preview / download the child theme directly and then make it fit your needs.
Credits
http://dquinn.net
http://blog.ftwr.co.uk
http://rubenwoudsma.nl
http://justintadlock.com
join me on twitter
free rss updates
119 Comments
Thanks for this Cristian! I was wondering if you knew a way to incorporate a file uploader to the front and backend of this as well?
I haven’t tried this yet, but incorporating a normal upload button would do the trick. Of course you’ll need proper server-side programing for this to work but it shouldn’t be an issue. After the file gets uploaded to the server just save in the database it’s url or server path (so you can delete it if needed on the edit page) like you would save the Twitter extra information field.
Have a look at this tutorial that let’s users upload a header image for Thematic. You can use part of that code (the uploading part) and this tutorial to get it working: http://www.cozmoslabs.com/2009/05/28/add-a-header-image-to-thematic-the-easy-way/
thanks for sharing this link
Hey question: How safe is this?
I’d say quite safe. I’ve used the same process and functions WordPress uses to register users, escaped everything that goes to the database.
I can’t guarantee it’s 100% safe but then again what is?
Can this work in any wordpress theme? I also noticed in the functions.php file, the php tag is left open, is there a reason for this?
This code can be adapted for any WordPress theme without a lot of work.
Also the php tag is left open so we don’t get the “Headers Already Sent” error when we have spaces after the last ending tag. You can add it if you like.
Hello Christian,
Thanks for this great article. I am not the best coder in this world, and i cant find out how to implement this to my own theme. Can you help me?
This article was a great help building a profile page. It took me a while to get it going on my end.
Is there any way to echo a message after someone updated their member profile? Additional it would be great to send an email to admin and the user to inform them of the changed profile.
Thomas
Sure. It should be a piece of cake.
Just look for the line that says
if(!$error){Then remove the following two lines, and instead of them add your
wp_mail()function and perhaps set a variable that you will later echo someplace in your template.This is excellent, just what I was looking for! I would love WordPress to have these templates available by default but C’est la vie.
This is fully compatible with WordPress 3.0, correct?
Yes, I’ve tested on 3.0.1 and is working beautifully.
Cya,
Yes, but update_usermeta is deprecated, and should be replaced by update_user_meta.
hello, how do I include this feature in my blog? I have another issue, would have to use shortcode pages? these codes would go where? please help me!
I don’t think he offers support like that, you’ll have to search for your own implementation.
I am tinkering with the code myself now to get a front-end registration and user profile management system up and running on my site.
that’s a fine work!
it really opened my eyes about what wordpress can do in the area of community content sites. it is not trivial.
but i have a bug, though.
) i got:
it’s in your preview also.
I’ve tried to give flash details to check the stability of the over-all-registration function.
when i used Hebrew letters in the user-name field (an issue that could accrue again on my website cause it’s in Hebrew
Catchable fatal error: Object of class WP_Error could not be converted to string in /home/cozmosla/public_html/project/wp-includes/formatting.php on line 2772do you have a clue how to work around it?
if i can help, tell me how…
Cheers, Asaf.
This could be an issue with WordPress it self. Have you tried to put Hebrew letters in the backend in the user name?
yes.
then i got a message that tells me that my username is not valid, instead of the php “fatal error” that i’ve got on the stand-alone registration form in the preview.
asaf.
so, what do you say?
what is the right way to the solution? can you make an educated guess about it? i’ll try to look for it, and if i’ll find a solution, it will be posted here, of course…
I think you need to open up profile.php file inside wp-admin and see where it verifies the username and use that function in the front end template.
At this point I don’t have the time to look into it. If I’ll find out something I’ll post an update on the post.
I appreciate your contributions, but as a complete programing noob I had no idea how to follow your methods – some of your notes do not even mention what file you are modifying. For instance the first step, “First of all, we want some extra profile fields in the back-end.” What file is this?
I am desperately trying to learn. I used WP-Member plugin for a while but now I have someone asking for custom fields, alas I stumbled on your Web site. Help!
If you had bothered to read the actual post, it says
Hi,
Thanks for the tutorial. I have added my own custom fields using this and have everything setup pretty much the way I wanted but is there a way to make the other fields required besides just user name and password?
Of course, but you have to validate them your self. In the registration area where you setup the $error variable that’s where you can validate your fields so they aren’t empty. If they are echo out to your user that they should complete them.
Thank you, thank you, thank you. I’ve had the most difficult time trying to find an article that explains so well how to customize user profile fields and options. This is precisely what I’ve been looking for!
Thanks for taking the time to write this out and share this information.
Can somebody help me with a country select?
I’m stuck here:
'Please select a country',
....,'ZW' => 'Zimbabwe' );
foreach($countries as $code => $name) {
$selected = ($country == $code) ? 'selected="selected"' : '';
echo '' . $name . '';
}?>
Sorry, this should be fine
select
‘Please select a country’,
‘–’ => ‘None’,
….,’ZW’ => ‘Zimbabwe’ );
foreach($countries as $code => $name) {
$selected = ($country == $code) ? ‘selected=”selected”‘ : ”;
echo ” . $name . ”;
}?>
select
The country select should be similar to the year select that’s already implemented. You can duplicate that functionality and instead of years have countries.
http://cozmoslabs.com/project/thematic-frontend-profile/register/
Hi, Thanks for posting this, it has been really helpful. My only problem is that text fields entered by the user are not saved when I click “Update Profile”. Radio boxes and drop downs are fine. Any idea why they wouldn’t be stored?
Thanks.
Did you use the Childtheme download of the just copy pasted from the tutorial. I’m asking because you could have forgotten to add some code. The demo is working fine and the code there is in the download.
I am using an original theme, so I downloaded the zip file and copied it into the folder of the theme I am using. It seems to be functional except for the one issue. I am not using the code as a child theme but implementing it in the Tradoc manner. I had the same problem with his method.
Thank you very much for this plugin, it’s very helpful! – I have noticed something (I’ve copy-pasted your code for edit-user) when I click on ‘Update’ this reload the page but doesn’t show anything (a page without forms…) can you review your code… maybe it’s something related with the update action but I’m not sure…
Actually I have fixed this, I just removed the ‘!’ from the conditional if ( !$error ) and now it reads if ( $error ), this is after the text that reads /* Redirect so the page will show updated info. */, also, I don’t know if the wp_redirect() function is returning any problem… but it works now! Thanks!!
If i activate the theme is still gives the default forms, how can i fix that?
THNX !
We’re not changing the default registration fields, instead we’re creating our on on the front page. Just set up your register, edit profile and login pages with the corresponding page templates.
oh oke
and how do you do that, i’m new to wordpress
just add a new page with that code in it?
thnx !
Please read about Page Templates here: http://codex.wordpress.org/Pages#Page_Templates and then come back and read the tutorial.
thnx cristian !!
How can one port this to work in a different theme other than Thematic theme?
I’m getting a reference call error to the thematic function.
Great job Cristian!
I have just a little security issue i want you to note.
In the “User Registration Page Template”, to the line:
else{
$new_user = wp_insert_user( $userdata );
wp_new_user_notification($new_user, $user_pass);
i would make this change:
elseif($_SERVER['HTTP_REFERER'] == the_permalink()){
$new_user = wp_insert_user( $userdata );
wp_new_user_notification($new_user, $user_pass);
or someone could create thousands of users in your db with automatics external post requests…i dont know if “$_SERVER['HTTP_REFERER'] == the_permalink()” is the right control (i had this idea very quickly…), but of course a controlo here is necessary.
Anyway thanks, you are a master!
Thank you for the contribution. I’ll try and find some free time and update this tutorial.
To Web Fusion,
The wp_nonce_field() in form is suppose to deal with that, but cristian code of it in form is incomplete.
Hello, is there a way to add the password fields in the Registration page? To permit users create their own password.
Thanks a lot!
The way it’s functioning right now is auto-generating a password. After the signin the user can edit that one from the edit template.
To loop back to the first comment.. has anyone figured out a solution to add an upload field to this? Ideally I could get this working with something like the user-photo plugin which I threw on Pastie if anyone has any ideas…
http://pastie.org/1159894
It can’t be that hard to do… just that I don’t have the time to do it… will try and update this sometime in the future with upload fields.
After a bit more searching around I found the solution here
and here
and adding the CIMY plugin
This is the code that worked for me and a ‘my account’ page
http://pastie.org/1160039
Hello,
This is some nice code, however i am trying to include the login form on the sidebar and keep getting this error:
Warning: Cannot modify header information – headers already sent by (output started at /Users/johnhodgson/Sites/virofinal/wp-content/themes/viroshop/single.php:3) in /Users/johnhodgson/Sites/virofinal/wp-includes/pluggable.php on line 690
This is the warning.
Hi Matt. Make sure the first part between the php tags is at the very top of your page header.. and make sure you are not calling the header twice.
Hey, thanks for the response
I have tried your solution but still get the same error
what happens is when i login it redirects me to a post with the errors on that page.
I believe it has something to do with this part of the code that redirects me:
<form action="” method=”post” class=”sign-in”>
The code works smoothly with its own page template. I’m trying to include the script on all pages within the sidebar.php.
Any ideas?
Cheers
Are thought you were talking about the profile page.. your action should be directed to your wp-login.php. If you cant get it to work you could do what I ended up doing.. put it in a modal window and have the pages called through AJAX. If you need it displayed in the sidebar at least a temporary solution would be to iframe it as a work around.
Yer, i did think about the iframe method but something i’d rather stay away from.
I found an a plugin called sidebar-login, i managed to use a piece of code from there and everything is all good.
Thanks for your help though
Hi,
Enjoying your post, but where can i find the frontendprofile.po file to translate ??
regards
hmm,
i think i found a simple solution to translate i have put the files in a sub theme folder and with poedit i can now translate. Only need to find a way get the templates to work in a subfolder
regards
Great post, thank you, it was very helpful for current theme creation task. One issue that I found is that wp_signon returns an error object but this is empty no matter what. I even went step-by-step according to the codex:
$creds = array();
$creds['user_login'] = $_POST['user-name'];
$creds['user_password'] = $_POST['password'];
$creds['remember'] = $_POST['remember-me'];
$login = wp_signon($creds, false);
if(is_wp_error($login)) {
print_r($login);
}
Given wrong credentials it returns empty:
WP_Error Object ( [errors] => Array ( ) [error_data] => Array ( ) )
Anybody else with that problem?
Thanks! I have just recently been messing with my templates php coding. This helps!
That code is great…
i’ve tryed your demo at http://cozmoslabs.com/project/thematic-frontend-profile/
but any kind of username i try to use it still say me “This username is invalid because it uses illegal characters. Please enter a valid username. ”
I tryed to use “danielelikesthatcode” also… but it wan’t works…
Where i wrong? tnx
This is so valuable. Using this code in conjunction with Justin’s member shortcode function here has allowed me to create an effective and simple user registration/registration-protected content solution.
Thanks
Hi, i get this error :
Fatal error: Call to undefined function thematic_abovecontainer() in /home/*****/public_html/wp-content/themes/thematic-frontend-profile/tpl_register.php on line 59
please help me, thx
Do you have Thematic installed. If yes, try and reupload it.
I’ve tried registereing with several usernames, but keep getting this error:
“This username is invalid because it uses illegal characters. Please enter a valid username.”
Me too same error. Is there a fix for it?
Awesome post – can’t thank you enough. I’m developing a plugin that needs to store extra user information and this post gives me exactly the information I need. My plan is to use custom shortcodes instead of templates to display the edit profile, user registration and login information on the front end. I’ll have to let you know how it goes!
PS – I was hoping to use the Register Plus plugin to do this but it needs an overhaul and doesn’t address the front end display. Hmmmm – maybe there is a need for a new plugin?
If you figure it out or can update the original plugin, let me know, I’ve been looking for a clean and easily updateable solution with no luck, I’m surprise one hasn’t been made yet, a front-end membership solution I mean.
i’m getting this error when i’m logging:
Warning: Cannot modify header information – headers already sent by (output started at /home/oystertr/public_html/site/wp-content/themes/ne/header.php:2) in /home/oystertr/public_html/site/wp-includes/pluggable.php on line 690
Warning: Cannot modify header information – headers already sent by (output started at /home/oystertr/public_html/site/wp-content/themes/ne/header.php:2) in /home/oystertr/public_html/site/wp-includes/pluggable.php on line 691
Warning: Cannot modify header information – headers already sent by (output started at /home/oystertr/public_html/site/wp-content/themes/ne/header.php:2) in /home/oystertr/public_html/site/wp-includes/pluggable.php on line 692
You have successfully logged in as admin.
My header.php looks like:
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="; charset=” />
…
You know why?
Thanks
I am getting the same error now. It seems to be a conflict with one of my plugins (Photosmash). I will let you know if I figure anything out..
thanks a lot Cristian,
this is the most needed functionality in a multi user site/blog but also missing from wordpress core,
thank you very much for this, i think the only thing is missing is a profile image upload,
i have try to include User Photo and Cimy User Extra Fields plugins, but with no luck,
does anyone have found a working solution?
thanks a lot!
I have been trying to get profile images on the front forever! If anyone finds a solution please post the code here.
oh man.. i need to sleep more or something. i forgot i already found a way to make this work, i posted a comment a couple of months ago on this thread
here is the pastie http://pastie.org/1160039
thanks for your reply Zac,
i checking your code at pastie but i think is based on an another tutorial that doesn’t use the show_user_profile and edit_user_profile to store/edit the user data.
i try to add cimy-fields plugin (image upload form) but i can’t make it upload and save the image.
anyone can help with this?
thanks a lot,
Philip
Hello,
I have this almost working, but it isn’t fitting into my template. I have the 2010-weaver template, and I am copying the code that you supplied and pasting into the page through the admin area of wordpress. I have it so that I can edit it, but the content is being pushed down below the sidebar. If I edit the css, it will change the layout of my entire site.
Do you know how to set this up for 2010-weaver
Thanks,
Aaron
Cristian i just seen that in the login template you make use of the “wp_login” that have been deprecated and now is “wp_signon”, but if you replace it you get errors
any plans to release an update?
thanks a lot,
Philip
Hi Philip,
I don’t have plans to update this tutorial, however I do have plans for a User Profile Plugin that can do everything in this tutorial from a GUI. I don’t have a timeframe for it but I’ve already started work on it.
thanks for this information Cristian,
one simple question that no one have ask or talk about,
how you get the “Hobbies” and the “Agree” selections in an Author template?
for the “Birth” i use echo $curauth->birth; and it returns the year selected,
for the Agree i try:
$eg = $curauth->agree;
if ($eg==”Yes”)
echo ‘Yes WordPress is the best’;
for the Hobbies i have no idea…
what i have to do to get this info? can you help a bit, or someone here knows how to do this?
thanks a lot for sharing this tutorial!
Joanna
Hi All,
I downloaded theme from link below:
http://www.cozmoslabs.com/wp-content/plugins/download-monitor/download.php?id=11
Put in themes folder, and activated theme, but i don’t see what i see in the demo. What am i doing wrong? I have never used templatic themes before. Help is much appreciated.
Cristain,
In general, why are you using error checks in your input value attrributes? I noticed the log on templare does have error checks.
David Shoe
Russia
It’s a pitty the “forgot pasword” link still points to the back-end login page of wordpress
How can I also make this work trough the front-end
many thanks!
Rinni
I think the best way to do this is to style the WordPress “forgot password ” so it’s integrated with your logo and design.
also i have a intent to change the forgot password template … but seem to be nothing in my head
jusst say thanks you ! but i have to have a small change to your code to suite my theme …
This is great, but how easy is it to implement into a WP site that isn’t using a Thematic Child Theme?
This was done using Thematic out of convenience. You should be able to modify it to work with your own theme if needed… just make sure to test everything. There are a lot of variables and it’s easy to miss something.
Hello @Cristian hi i have one question about how to display selected hobbies of individual authors on author.php because when i try this code
ID );
it show the text Array. I want to display selected hobbies by author. Please help me out from here. Thanks in advance?>
I´m I tried to register myself using flaviowd as an username, but an error appears, informing that “flaviowd” is using a invalid characters. What is wrong?
There is a problem with that particular demo. Unfortunately I don’t have time to test it properly.
Also I’ve started work on a plugin that will allow you to add front-end profiles a lot easier and without writing any code. The initial version will be out in a week or so and will allow you to make use of the existing WP fields to create your front end registration and user profiles. You can subscribe to this blog to know when it’s released.
Hi there,
Great article, many thanks! Would you know how it would be possible to incorporate a CAPTCHA or human test question to weed out spam bots filling out bogus information? Thanks.
Jon
I don’t see any problem with doing that. However you’ll have to code that your self.
Im looking for some developer who can optimize this template. Is a good basement, but it has some issues to enhance. Find me in google.
This tutorial has been transformed into a plugin. Check it out: http://www.cozmoslabs.com/2011/04/12/wordpress-profile-builder-a-front-end-user-registration-login-and-edit-profile-plugin/
Brilliant article / tutorial. Just implemented, adjusted for my own custom profile fields, and viola, works. Little bit of DOM / CSS adjustment and it’ll look great.
I believe I’m on WP 3.0.4, running multisite. Did a lot of looking at plugins and other tutorials that tried to use add_action(‘register_form’ … ) and they all failed for multisite. Sweet thing about your approach is the content admins can edit the content that appears above the form right in WP-Admin Page edit, and not bork the form in the process. Nice.
Thanks for your contribution, Cristian.
Hi there,
Great article, many thanks! Would you know how it would be possible to incorporate a CAPTCHA or human test question to weed out spam bots filling out bogus information? Thanks.
I’ve yet to try this, but I’m curious what you think would happen if WP core implemented the same functionality?
That would be a really good thing honestly. However until that happens you can try out the plugin: http://www.cozmoslabs.com/profile-builder-beta/
Hi Cristian,
great tutorial. I would not use the plugin, how do I add a message “Update Post” .can you help?
Any help is appreciated, thanks!
sorry “Update Success”
what is the hook to add custom fields while creating new user from admin panel. I can see only:
add_action( ‘show_user_profile’, ‘my_show_extra_profile_fields’ );
add_action( ‘edit_user_profile’, ‘my_show_extra_profile_fields’ );
but what for add_action(‘??’,'my_show_extra_profile_fields’) for http://**/wp-admin/user-new.php ??
Is there any hook for that? Am I clear to my requirement?
Thanks
Hello Robin,
not sure what you want to achieve exactly, but this may be what you were looking for:
register_form
Runs just before the end of the new user registration form.
http://codex.wordpress.org/Plugin_API/Action_Reference/register_form
OR this (depending on the timeline when you want your function to trigger):
register_post
Runs before a new user registration request is processed.
http://codex.wordpress.org/Plugin_API/Action_Reference/register_post
That for register form. But I want to add custom fields from admin panel while creating new user. “register_form” hook can be used for use registration for non-admin people.
I hope you understand.
Thanks
This tutorial is just a start-off for what you want. So basically the premium version of Profile Builder does all what you need, but from the front-end: add custom fields during registration.
Gabriel
Hey guys
I was wondering if anyone can please help me with something really small on my website that i cant seem to figure out.
I want to add in an extra “Custom Field” in my models profiles to say “Location” but i cant seem to get it into the frontend of wordpress to show up on the website?
Any ideas?
Thanks so much
Hi there,
I have a WordPress site & need to offer users a simple login/registration option so they can post topics on a bbpress forum (Im using the bbpress plugin).
Your plugin looks great & wonder if it would suit my basic needs?
thanks.
That should work just fine, however you should know there’s a page template in bbPress 2.0 that has login/registration/edit-profile. Maybe you should look into that before you install a plugin when the functionality already exists.
Cheers
Thanks Cristian,
Much appreciated. I’ll have a look!
Howdy!
I created custom profile field, called “agenttitle” and it displays without a problem on a page showing single user info:
However I am not able to make it happen on the page that lists all users. That page is calling one function which works fine for displaying the picture and the name of user, but no way in hell can I add the custom field.
It’s something like (bottom part of it):
$agent = ''.$displayname.'';echo $agent;
And above part works fine. How do I add the custom field?
Thanks!
Hello Ba1drick,
your info is really ambiguous. Please either send me either ftp credentials (if it is online) or the file itself (if it is on your localhost) with some more details to gabriel@cozmoslabs.com and I will debug it.
Gabriel
Hi all,
I have a profile page and I need to make a comment system on it. The comments system should work exactly the same way as standard WordPress comment system, but instead of posts it should work with users. For better understanding, I have 1 page which acts as a profile for every user (user_login is in the URL) and at the bottom of that page users can leave comments about ‘profile’ user. and
Any ideas how to achieve this? What should be changed? Is there any wordpress plugin for this of can you send me any PHP function for this.
waiting….
Thanks
Hello mylife,
you can add a textarea and a submit button with the class/id the wp uses for that same styling. Then you can just save the submitted data in the user_meta table.
I am not aware of (personally) of any plugin that would do this.
Gabriel
Hi,
I am looking if this functionality will work on my project and am new to wordpress. I did notice that registration.php is required in the tpl_register.php template ->require_once( ABSPATH . WPINC . ‘/registration.php’ );)
The problem is that the registration.php file is deprecated in wordpress version 3.2.1!
Also, will this work with Multisite?
Thanks for a great tutorial. I know it takes time to do and it is much appreciated by this community.
Regards,
Raynbow
Hello raynbow,
regarding the inclusion of the registration.php file: it’s only a warning that wp emits when including this file, so you should be fine. Also, seems the new versions of WP already include the basic functions this file contains, so including it shouldn’t be necessary.
Regarding the multisite: it should work, but it hasn’t been tested yet.
Gabriel
Hi Gabriel,
Thanks for your reply. I will try it this week and let you know how it turns out.
Regards,
Raynbow
Jus started now. Nice article Cristian. ‘ll be back with feed back in two days.
I have a custom PHP based user system with database, users are managing their stuff in it. I simply want that all system should remain as it. Only want to integrate WP Users system with my system. Basically I want to run my current system with wp users/profiles.
Is that possible?
If yes can you recommend me any person who can do it perfectly. And how much cost I should pay for it.
Please reply as I really want like that.
Hello,
our plugin only works with WordPress sites…so no plugin designed for it will work as it is with a php site. We can however redo your site on the WP framework, should you decide for such a project.
Gabriel
Some time ago, I needed to buy a good house for my business but I did not have enough cash and could not buy anything. Thank heaven my brother proposed to try to take the business loans from trustworthy bank. So, I did so and was happy with my short term loan.
Hello you are genius!! Thanx you save a lots of my time..
again thanks…
Thanks a lot,
I was stock in a hell of the problem, just need to user profile extra fields to be repeated multiple times.
Your tutorial help me a lot.
Very Interesting. Thanks!
9 Trackbacks
[...] To Web Fusion, The wp_nonce_field() in form is supposeIan Gordon iangordon.us. Posted July 24, 2010 at 12:59 am | Permalink ….. Robert. Posted October 23, 2010 at 10:03 am | Permalink … [...]
[...] http://www.cozmoslabs.com/1012-wordpress-user-registration-template-and-custom-user-profile-fields [...]
[...] Referência: Cozmos Labs. [...]
[...] http://www.cozmoslabs.com/1012-wordpress-user-registration-template-and-custom-user-profile-fields [...]
[...] dont like to use a plugin so i made use of user registration custom signup page and its not sending any emails:( at first everything is working then i added [...]
[...] dont like to use a plugin so i made use of user registration custom signup page and its not sending any emails:( at first everything is working then i added [...]
Resveratrol…
[...]Resveratrol supplement is actually a poly – phenolic compound found in many meals for example grapes[...]…
Scholarships For Women…
[...]these are a handful of references to online websites which we link to for the fact we think they really are well worth visiting[...]…
Bill Gates Scholarship…
[...]the following are a couple of web page links to internet websites that we connect to since we believe they will be worth browsing[...]…