First off, install and activate ProfilePress plugin.
Click the Login Form menu as shown in the image below.
Click the Add New button.
Enter a name for the login form in the Template Name field.
Paste the HTML and CSS code for the login form into the Login Design and CSS Stylesheet textarea/fields.
divin div element with class profilepress-login-status (
<div class="profilepress-login-status">) hence the
.profilepress-login-statusCSS class in the login style sheet above.
Click the Preview Design button to view how the login form will look.
For ProfilePress to make this login form functional, the form components which in this case are the username, password text field and the submit button will have to be replaced by its ProfilePress shortcode equivalent.
Below is how the HTML code for the login form should look for it to work.
Replace the HTML we earlier entered into the Login Design with the code above.
If we want to make this login form available as a WordPress widget that can be drag and drop into a widgetized area / sidebar, check the Make this a Widget check box.
Save and then click the
Back to Catalog button.
Copy the created login form shortcode, paste it to a WordPress page and save.
Preview the page and you will see the login form in action.
Note: The steps for creating a custom registration form, password-reset form, edit user profile and front-end user profile pages using ProfilePress is pretty much the same as that of a login form stated above.