Edit WordPress User Profiles in Your Theme With Gravity Forms

Great stuff from the Fublo bolg: http://blog.fublo.net/2011/12/edit-wordpress-user-profiles-gravity-forms/ On our latest client project, we created a Gravity Form which allowed logged in users to edit their public profiles, all done on the public side of the WordPress site, without visiting /wp-admin. This post outlines the way in which we stitched all the code together to make use of Gravity Forms. It’s not a definitive solution, but hopefully will help some people that need profile editing functionality inside their theme. The components are:

A page template to hold the profile editing form and populate it with the existing profile information.
A Gravity form with the required fields set up and named correctly.
An additional hook and function call to process the received data and save it to the logged in use profile.

The code below updates the normal WP user’s first, last and display names, plus stores the additional data in a user meta field called “fublo_profile”, this can all be adapted as required.

Hook and function call

The following is the code that can be added to the functions file, or other included file in your theme. You will almost certainly need to edit this to fit with your requirements:

Adjust the ID number of your form on line 3.
Edit the fields in your form on line 13.

[php] <pre>// add the following to your functions file or similar define( 'FUBLO_GF_PROFILE', 1 ); // define the ID number of your profile form. // ============================================================= PROFILE EDITING /** * These are the user metadata fields, with their names and the data about them. * You can add more information to each field for example on whether to display * in the public profile, the format, etc. In this example, we just have the * index of each item so we can reference it easily. */ function fublo_gf_profile_metafields() { return array( 'displaynamepref' => array( 'gf_index' => 2, ), 'age' => array( 'gf_index' => 3, ), 'sex' => array( 'gf_index' => 4, ), 'location' => array( 'gf_index' => 5, ), 'twitter' => array( 'gf_index' => 6, ), ); } /** * Update the user's profile with information from the received profile GF. * run last - just to make sure that everything is fine and dandy. */ function fublo_gf_profile_update( $entry, $form ) { // make sure that the user is logged in // we shouldn't get here because the form should check for logged in users... if ( !is_user_logged_in() ) { wp_redirect( home_url() ); exit; } // get current user info... global $current_user; get_currentuserinfo(); // do the user data fields... $new_user_data = array( 'ID' => $current_user->ID, 'first_name' => $entry['1.3'], // these are the ID numbers of these fields in our GF 'last_name' => $entry['1.6'], ); // build the metadata from the entry $new_user_metadata = array(); foreach ( fublo_gf_profile_metafields() as $field_name => $info ) { $new_user_metadata[ $field_name ] = $entry[ $info['gf_index'] ]; } // build the display name - (there's almost certainly something in WP to do this already, probably in an admin file) switch ( $new_user_metadata['displaynamepref'] ) { // like James case 'first': $display_name = $new_user_data['first_name']; break; // like James C case 'short first': $display_name = $new_user_data['first_name'] . ' ' . ucfirst( substr( $new_user_data['last_name'], 0, 1 )); break; // like J Cooke case 'short last': $display_name = ucfirst( substr( $new_user_data['first_name'], 0, 1 )) . ' ' . $new_user_data['last_name']; break; // like James Cooke. case 'full': default: $display_name = $new_user_data['first_name'] . ' ' . $new_user_data['last_name']; break; } $new_user_data['display_name'] = $display_name; // ----------------------------------------------- SAVE ALL THE THINGS wp_update_user( $new_user_data ); update_user_meta( $current_user->ID, 'fublo_profile', $new_user_metadata ); } add_action( 'gform_after_submission_' . FUBLO_GF_PROFILE, 'fublo_gf_profile_update', 100, 2 );</pre> [/php]

Page template

The page template checks that the user is logged in, grabs their data and uses it to populate the form. All the data is stored in $fublo_current_user_data which is then passed to the form when it’s embedded in the template. You should create a page in your wp-admin and set its template as “Edit profile” once this code is in place. page-edit-profile.php [php] <pre>/* Template Name: Edit Profile */ // ---------------------------------------------------------------- CHECK STATUS // check for logged in - kick if not. if ( !is_user_logged_in() ) { wp_redirect( home_url() ); exit; } /** * pull in the required stuff for the GF * more here : http://www.gravityhelp.com/documentation/page/Gravity_form_enqueue_scripts * gravity_form_enqueue_scripts($form_id, $is_ajax); */ if ( function_exists( 'gravity_form_enqueue_scripts' ) ) { gravity_form_enqueue_scripts( FUBLO_GF_PROFILE, false ); } // get current user info... global $current_user; get_currentuserinfo(); // grab the current profile data... $fublo_current_user_data = get_user_meta( $current_user->ID, 'fublo_profile', true ); // stuff the user's shizz into it... we use this to populate the GF. $fublo_current_user_data['first_name'] = $current_user->first_name; $fublo_current_user_data['last_name'] = $current_user->last_name; get_header(); // ---------------------------------------------------------------- ROLL THE TEMPLATE if (have_posts()) { the_post(); ?> <h1><?php the_title() ?></h1> <?php the_content(); // this gives the opportunity to write something to our users. if ( function_exists( 'gravity_form' )) { gravity_form( FUBLO_GF_PROFILE, false, false, false, $fublo_current_user_data ); } else { ?> <h2>We need Gravity Forms installed to run this theme.</h2> <?php } } else { ?> <h1>Profile editing currently unavailable</h1> <?php } get_footer();</pre> [/php]

Gravity form

The Gravity form itself is now the simple bit. You should be able to see how it is loaded by the page template and how its fields are processed by the hook in the functions above. You can use this export file which matches the function call above so it should fire the profile data back into the logged in user’s record. Profile edit form export data (XML file) - do right click, save as. You will want to edit the confirmation action - one option is to point the user back to their newly updated profile page with a message saying its updated.

All done

That’s it - hopefully you’ll have a good starter profile editing form that you can expand and fit to your requirements. All the code can be viewed in this gist. Comments and questions always welcome.

Revisions

May 14, 2012 @ 14:33:52 [Current Revision] by PeterLugg
May 14, 2012 @ 14:30:35 by PeterLugg

Revision Differences

--- May 14, 2012 @ 14:30:35
+++ Current Revision
+Added: Great stuff from the Fublo bolg: <a href="http:// blog.fublo.net/ 2011/12/edit- wordpress-user- profiles-gravity-forms/" target="_blank" >http://blog.fublo.net/2011/ 12/edit-wordpress- user-profiles- gravity-forms/</a>
+Added: On our latest client project, we created a Gravity Form which allowed logged in users to edit their public profiles, all done on the public side of the WordPress site, without visiting <code> /wp-admin</code>.
+Added: This post outlines the way in which we stitched all the code together to make use of Gravity Forms. It’s not a definitive solution, but hopefully will help some people that need profile editing functionality inside their theme. The components are:
+Added: <ul>
+Added:  <li>A <strong>page template</strong> to hold the profile editing form and populate it with the existing profile information.</li>
+Added:  <li>A <strong>Gravity form</strong> with the required fields set up and named correctly.</li>
+Added:  <li>An <strong>additional hook and function call</strong> to process the received data and save it to the logged in use profile.</li>
+Added: </ul>
+Added: The code below updates the normal WP user’s first, last and display names, plus stores the additional data in a user meta field called “fublo_profile”, this can all be adapted as required.
+Added: <h2>Hook and function call</h2>
+Added: The following is the code that can be added to the functions file, or other included file in your theme. You will almost certainly need to edit this to fit with your requirements:
+Added: <ul>
+Added:  <li>Adjust the ID number of your form on line 3.</li>
+Added:  <li>Edit the fields in your form on line 13.</li>
+Added: </ul>
+Added: [php]
+Added: &lt;pre&gt;// add the following to your functions file or similar
+Added: define( 'FUBLO_GF_PROFILE', 1 ); // define the ID number of your profile form.
+Added: // ============= ============= ============ ======================= PROFILE EDITING
+Added: /**
+Added:  * These are the user metadata fields, with their names and the data about them.
+Added:  * You can add more information to each field for example on whether to display
+Added:  * in the public profile, the format, etc. In this example, we just have the
+Added:  * index of each item so we can reference it easily.
+Added:  */
+Added: function fublo_gf_profile_ metafields()
+Added: {
+Added:  return array(
+Added:  'displaynamepref' =&gt; array(
+Added:  'gf_index' =&gt; 2,
+Added:  ),
+Added:  'age' =&gt; array(
+Added:  'gf_index' =&gt; 3,
+Added:  ),
+Added:  'sex' =&gt; array(
+Added:  'gf_index' =&gt; 4,
+Added:  ),
+Added:  'location' =&gt; array(
+Added:  'gf_index' =&gt; 5,
+Added:  ),
+Added:  'twitter' =&gt; array(
+Added:  'gf_index' =&gt; 6,
+Added:  ),
+Added:  );
+Added: }
+Added: /**
+Added:  * Update the user's profile with information from the received profile GF.
+Added:  * run last - just to make sure that everything is fine and dandy.
+Added:  */
+Added: function fublo_gf_profile_update( $entry, $form )
+Added: {
+Added:  // make sure that the user is logged in
+Added:  // we shouldn't get here because the form should check for logged in users...
+Added:  if ( !is_user_logged_in() )
+Added:  {
+Added:  wp_redirect( home_url() );
+Added:  exit;
+Added:  }
+Added:  // get current user info...
+Added:  global $current_user;
+Added:  get_currentuserinfo();
+Added:  // do the user data fields...
+Added:  $new_user_data = array(
+Added:  'ID' =&gt; $current_user-&gt;ID,
+Added:  'first_name' =&gt; $entry['1.3'], // these are the ID numbers of these fields in our GF
+Added:  'last_name' =&gt; $entry['1.6'],
+Added:  );
+Added:  // build the metadata from the entry
+Added:  $new_user_metadata = array();
+Added:  foreach ( fublo_gf_profile_ metafields() as $field_name =&gt; $info )
+Added:  {
+Added:  $new_user_metadata[ $field_name ] = $entry[ $info['gf_index'] ];
+Added:  }
+Added:  // build the display name - (there's almost certainly something in WP to do this already, probably in an admin file)
+Added:  switch ( $new_user_metadata['displaynamepref'] )
+Added:  {
+Added:  // like James
+Added:  case 'first':
+Added:  $display_name = $new_user_data['first_name'];
+Added:  break;
+Added:  // like James C
+Added:  case 'short first':
+Added:  $display_name = $new_user_data['first_name'] . ' ' . ucfirst( substr( $new_user_data['last_name'], 0, 1 ));
+Added:  break;
+Added:  // like J Cooke
+Added:  case 'short last':
+Added:  $display_name = ucfirst( substr( $new_user_data['first_name'], 0, 1 )) . ' ' . $new_user_data['last_name'];
+Added:  break;
+Added:  // like James Cooke.
+Added:  case 'full':
+Added:  default:
+Added:  $display_name = $new_user_data['first_name'] . ' ' . $new_user_data['last_name'];
+Added:  break;
+Added:  }
+Added:  $new_user_data['display_name'] = $display_name;
+Added:  // ------------- ------------- --------------------- SAVE ALL THE THINGS
+Added:  wp_update_user( $new_user_data );
+Added:  update_user_meta( $current_user-&gt;ID, 'fublo_profile', $new_user_metadata );
+Added: }
+Added: add_action( 'gform_after_ submission_' . FUBLO_GF_PROFILE, 'fublo_gf_profile_update', 100, 2 );&lt;/pre&gt;
+Added: [/php]
+Added: <h2>Page template</h2>
+Added: The page template checks that the user is logged in, grabs their data and uses it to populate the form. All the data is stored in <code>$fublo_ current_user_ data</code> which is then passed to the form when it’s embedded in the template.
+Added: You should create a page in your wp-admin and set its template as “Edit profile” once this code is in place.
+Added: <strong>page- edit-profile.php</strong>
+Added: [php]
+Added: &lt;pre&gt;/*
+Added: Template Name: Edit Profile
+Added: */
+Added: // ------------- ------------- ------------ ------------- ------------- CHECK STATUS
+Added: // check for logged in - kick if not.
+Added: if ( !is_user_logged_in() )
+Added: {
+Added:  wp_redirect( home_url() );
+Added:  exit;
-Deleted:
+Added: }
+Added: /**
+Added:  * pull in the required stuff for the GF
+Added:  * more here : http://www.gravityhelp.com/ documentation/ page/Gravity_ form_enqueue_scripts
+Added:  * gravity_form_ enqueue_scripts($form_id, $is_ajax);
+Added:  */
+Added: if ( function_exists( 'gravity_form_ enqueue_scripts' ) )
+Added: {
+Added:  gravity_form_ enqueue_scripts( FUBLO_GF_PROFILE, false );
+Added: }
+Added: // get current user info...
+Added: global $current_user;
+Added: get_currentuserinfo();
+Added: // grab the current profile data...
+Added: $fublo_current_user_data = get_user_meta( $current_user-&gt;ID, 'fublo_profile', true );
+Added: // stuff the user's shizz into it... we use this to populate the GF.
+Added: $fublo_current_ user_data['first_name'] = $current_user- &gt;first_name;
+Added: $fublo_current_ user_data['last_name'] = $current_user- &gt;last_name;
+Added: get_header();
+Added: // ------------- ------------- ------------ ------------- ------------- ROLL THE TEMPLATE
+Added: if (have_posts())
+Added: {
+Added:  the_post();
+Added:  ?&gt;
+Added:  &lt;h1&gt;&lt;?php the_title() ?&gt;&lt;/h1&gt;
+Added:  &lt;?php
+Added:  the_content(); // this gives the opportunity to write something to our users.
+Added:  if ( function_exists( 'gravity_form' ))
+Added:  {
+Added:  gravity_form( FUBLO_GF_PROFILE, false, false, false, $fublo_current_user_data );
+Added:  }
+Added:  else
+Added:  {
+Added:  ?&gt;
+Added:  &lt;h2&gt;We need Gravity Forms installed to run this theme.&lt;/h2&gt;
+Added:  &lt;?php
+Added:  }
+Added: }
+Added: else
+Added: {
+Added:  ?&gt;
+Added:  &lt;h1&gt;Profile editing currently unavailable&lt;/h1&gt;
+Added:  &lt;?php
+Added: }
+Added: get_footer(); &lt;/pre&gt;
+Added: [/php]
+Added: <h2>Gravity form</h2>
+Added: The Gravity form itself is now the simple bit. You should be able to see how it is loaded by the page template and how its fields are processed by the hook in the functions above.
+Added: You can use this export file which matches the function call above so it should fire the profile data back into the logged in user’s record. <a href="https:/ /gist.github.com/ raw/1455902/ 705278a35509b53561eadb8ace36881a3bbde64d/ gravityform-export- edit-profile- form.xml">Profile edit form export data (XML file)</a> - do right click, save as.
+Added: You will want to edit the confirmation action - one option is to point the user back to their newly updated profile page with a message saying its updated.
+Added: <h2>All done</h2>
+Added: That’s it - hopefully you’ll have a good starter profile editing form that you can expand and fit to your requirements. All the code can be viewed in this <a href="https:/ /gist.github.com/ 1455902">gist</a>. Comments and questions always welcome.

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: gravity forms, user profile