Say you want create or build a WordPress custom login form page with the below codepen login design. Continue reading to see how easy it is to do with ProfilePress plugin.
First off, install and activate ProfilePress plugin.
Click the Login Form menu as show in the image below.
Add New button.
Enter a name for the login form in Template Name field.
Paste the HTML and CSS code for the login form into the Login Design and CSS Stylesheet textareas respectively.
Note: Error messages generated by login forms powered by ProfilePress are wrapped in a div as follows
<div class="profilepress-login-status"> thus the CSS class in the login stylesheet.
Click the Preview Design button to see how the login form will look.
For ProfilePress to make this a functional WordPress login form, the form components which in this case are the username, password text field and the submit button will have to be replaced by their ProfilePress shortcode equivalents
Below is the final revision of the Login form code.
<div id="sc-login"> <h1>Log in</h1> <div class="sc-container"> [login-username placeholder="Username"] [login-password placeholder="Password"] [login-submit value="Log In"] </div> </div>
Replace the HTML form code earlier entered into the Login Design textarea with the code above.
To make the 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 publish.
Preview the page and you will see the login form in action.
We also have building a custom login form for WordPress covered here