How do I create an Edit Profile page for users on the frontend with custom fields using Wordpress?

Example Fields:

Image Upload Field

Text Field


And how can a user can save these fields?



This is a pretty big thing to ask but basically you go:
Add extra user fields:
Extra User Fields

Change them with a custom template for the user:

/* Get user info. */
global $current_user, $wp_roles;

Now you have the logged in user data which you can then alter. Create fields for the user to change and fill them with the current info e.g.

<input name="first_name" type="text" id="first_name" value="<?php the_author_meta( 'first_name', $current_user->ID ); ?>" />

Then save your data: First check if empty and then overwrite the data.

 if ( !empty( $_POST['first_name'] ) )
    update_user_meta( $current_user->ID, 'first_name', esc_attr( $_POST['first_name'] ) );

Then redirect the user if saved:

 /* Redirect so the page will show updated info.*/
if ( count($error) == 0 ) {
    //action hook for plugins and extra fields saving
    do_action('edit_user_profile_update', $current_user->ID);
    $location = get_the_author_meta( 'user_location', $current_user->ID );
    wp_redirect( get_bloginfo('url').str_replace(" ","-",$location));

It works this way. I did it in the exact same way.

  • Thanks . Are these changes on the admin panel ? Feb 14 '18 at 10:52
  • @Interactive - could you explain the redirect with showing updated info a little more? I've got this working except after form submit the page shows the old info in the form fields. If I refresh the page then the new info shows. The user is being updated when I check on the admin side. Thanks! Oct 15 '18 at 17:07

You can use profile builder plugin for it. here is shortcode for frontend edit profile [wppb-edit-profile]



Apart from me i'm using a front-ent edit profile plugin for front ent user edit porile form https://wordpress.org/plugins/frontend-edit-profile/

  • For anyone looking, this plugin is no longer available for download since October 2019. It's taken down because of a guideline violation so the developer might update it in the future.
    – jeh
    Aug 6 '20 at 19:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.