By default, users can only edit their profile information in WordPress from the backend dashboard. A lot of WordPress powered website owners dislike this behaviour and would rather prefer users edit or update their profile their website front-end.

In this tutorial, i will be showing us how to create a front facing or front-end edit profile form page using our ProfilePress plugin.

Mind you, ProfilePress is a shortcode based form builder. It uses shortcodes to accomplish its form building. In light of this, the following shortcodes are available for you to create and design your website edit profile form to your heart content.

Available Shortcodes for Front-end Edit Profile Form

[edit-profile-username title=”Username” placeholder=”Username”] — displays hidden input field that contains users’ username. Note: username can’t be edited nor changed.

[edit-profile-email title=”Email Address” placeholder=”Email Address”] — displays input field for users to edit their email addresses.

[edit-profile-confirm-email title=”Confirm Email Address” placeholder=”Confirm Email Address”] — displays input field for users to confirm the email address they are changing to.

[edit-profile-password title=”Password” placeholder=”Password”] — displays input field for users to change their password.

[edit-profile-confirm-password title=”Confirm Password” placeholder=”Confirm Password”] — displays input field for users to confirm the password they are changing to.

[edit-profile-avatar title=”Upload profile picture”] — displays field for users to upload or change their profile picture.

[edit-profile-website title=”Website” placeholder=”Website”] — displays input field for users to edit their website url.

[edit-profile-first-name title=”First Name” placeholder=”First Name”] — displays input field to change first name.

[edit-profile-last-name title=”Last Name” placeholder=”Last Name”] — displays input field to change last name.

[edit-profile-bio title=”Bio” placeholder=”Bio”] — displays textarea for users to edit their biography.

[edit-profile-cpf key=”field-key” type=”field-type” title=”title here” placeholder=”field placeholder”] — this is used to add form field to edit or change a custom field data.

[edit-profile-submit value=”Save Changes”] — displays submit button to process the edit profile request.

Armed with the above shortcode knowledge, let’s go ahead and create a custom edit profile form that looks like the image below.

Building the Edit Profile Form

Click the Edit Profile Form menu, then click the Add New button at the top left corner of the page.

Enter a name for the form in Theme Name field.

In Page Design, enter the code below.

<div id="sc-edit-profile"> <h1>Edit Your Profile</h1> <div class="sc-container"> [edit-profile-username placeholder="Username"] [edit-profile-password placeholder="Password" title="Password"] [edit-profile-email placeholder="Email" title="Email"] [edit-profile-website placeholder="Website" title="Website"] [edit-profile-nickname placeholder="Nickname" title="Nickname"] <div> <span class="demo-download"> [user-avatar] [remove-user-avatar label="Remove" class="btn btn-danger"] </span> </div> <div> <label for="avatar">Profile Picture</label> [edit-profile-avatar placeholder="avatar" id="avatar"] </div> <label for="display-name">Display Name</label> [edit-profile-display-name placeholder="Display Name" id="display-name"] [edit-profile-first-name placeholder="First Name" title="First Name"] [edit-profile-last-name placeholder="Last Name" title="Last Name"] [edit-profile-cpf key="country" type="text" placeholder="Country" title="Country"] [edit-profile-bio placeholder="About / Bio"] [edit-profile-submit value="Save Changes"] </div> </div>

The CSS code below for the form will go into the CSS Stylesheet textarea.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); .memo-reset-success,.profilepress-edit-profile-status{font-size:17px;font-weight:400;line-height:1.4;padding:8px 5px;margin:auto;width:400px;text-align:center;color:#fff} .profilepress-edit-profile-status{background-color:#e74c3c;border:none;border-radius:4px} .memo-reset-success{background-color:#2ecc71;border:none;border-radius:4px} #sc-edit-profile{background:#f0f0f0;width:400px;margin:8px auto 2%;transition:opacity 1s;-webkit-transition:opacity 1s} #sc-edit-profile h1{background:#39c;padding:20px 0;font-size:140%;font-weight:300;text-align:center;color:#fff} div#sc-edit-profile .sc-container{background:#f0f0f0;padding:6% 4%} div#sc-edit-profile input[type=text],div#sc-edit-profile input[type=password],div#sc-edit-profile input[type=file],div#sc-edit-profile select,div#sc-edit-profile textarea{width:100%;background:#fff;margin-bottom:4%;border:1px solid #ccc;padding:4%;font-family:'Open Sans',sans-serif;font-size:95%;color:#555;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} div#sc-edit-profile textarea{height:200px} div#sc-edit-profile input[type=submit]{width:100%;background:#39c;border:0;padding:4%;font-family:'Open Sans',sans-serif;font-size:100%;color:#fff;cursor:pointer;transition:background .3s;-webkit-transition:background .3s} div#sc-edit-profile label.css-labelz{background-image:none!important}div#sc-edit-profile input[type=submit]:hover{background:#28b}

For the message that will be displayed after a user successfully edit their profile, enter the code below into the Profile Edited Message field.

<div class="memo-reset-success">Changes saved.</div>

Hit the Save Changes button to create the form. After which, click the “Back to Catalog” button, copy the shortcode for the created edit profile form. The shortcode look like so: [profilepress-edit-profile id="11"] .

Create or edit a page, save the shortcode against it and preview to see the form live.

Conclusion

You can pick any of our available edit profile form themes and install following this guide.

In fact, we have the exact design of the form we built in this tutorial available for your download and installation so you don’t go through the stress of creating it.

Tags: edit profile