How to Redesign the WordPress Login System with WS Form

The default WordPress login page is functional but far from visually appealing. While I’ve added some basic styling to it in the past, it still leaves a lot to be desired. Thanks to Mark from WS Form, I discovered a way to completely redesign the login system using the tools you already use to build websites, along with WS Form Pro.

In this tutorial, I’ll walk you through the process of creating a custom login system, including three pages (login, forgot password, and password reset), adding forms from WS Form, and using a few PHP snippets to tie everything together.

Step 1: Setting Up the Pages

To start, you’ll need three pages:

1. Login Page
2. Forgot Password Page
3. Password Reset Page

Page Layout

I’ve already set up the general layout for these pages:

• Login Page: Includes a left column with some text and a right column with an image.
• Forgot Password Page: Same layout, but with a different headline and form.
• Password Reset Page: Similar layout, but for users to enter their new password.

Disabling Default Elements

On the back end, I used GeneratePress’s Disable Elements feature to remove the top bar, header, primary navigation, featured image, content title, and footer. This creates a clean look for the login pages.

You can customize this further by adding a logo or linking it back to your homepage.

Page Slugs

The slugs for these pages are important because they’ll be referenced in the PHP code later:

• Login Page: login
• Forgot Password Page: forgot-password
• Password Reset Page: password-reset

If you change these slugs, you’ll need to update the PHP code accordingly.

Step 2: Creating the Forms

WS Form Pro, along with the User Management Add-On, provides pre-made templates for login, forgot password, and password reset forms.

Login Form

1. Create the Form:
   • Go to WS Form > Forms and select the Login template under the User Management tab.
2. Customize the Form:
   • Remove the full-width class from the login button (under Advanced Settings).
   • Add a Forgot Password link:
     • Drag a Text Editor block into the form.
     • Type “Forgot Password” and link it to the slug forgot-password.
   • Adjust the layout for tablet view:
     • Stack the login button and forgot password link side by side.
     • Align them vertically to the middle.
   • Hide the label for the Remember Me checkbox.
3. Update Actions:
   • In the Actions menu, reduce the success message display time to 1 second (1,000 milliseconds).

Forgot Password Form

1. Create the Form:
   • Select the Forgot Password template under the User Management tab.
2. Customize the Form:
   • Remove the full-width class from the button.
   • Update the email action:
     • Replace the default lost password URL with your custom password reset page slug (password-reset).

Password Reset Form

1. Create the Form:
   • Select the Password Reset template under the User Management tab.
2. Customize the Form:
   • Remove the full-width class from the button.
   • Add a password visibility toggle to both password fields.
   • Update the success message:
     • Add a link to the login page (login) for users to log in after resetting their password.

Step 3: Adding Forms to Pages

Now that the forms are ready, add them to the corresponding pages.

1. Login Page:
   • Insert the WS Form block and select the Login Form.
2. Forgot Password Page:
   • Insert the WS Form block and select the Forgot Password Form.
3. Password Reset Page:
   • Insert the WS Form block and select the Password Reset Form.

Step 4: Testing the System

To test the login system, open the login page in an incognito window and go through the following steps:

1. Login:
   • Enter your credentials and click Login.
   • Verify that the success message appears and redirects you to the homepage.
2. Forgot Password:
   • Click the Forgot Password link.
   • Enter your username or email and click Get Password.
   • Check your email for the reset link.
3. Password Reset:
   • Open the reset link in an incognito window.
   • Enter a new password and confirm it.
   • Verify that the success message appears with a link to the login page.

Step 5: Redirecting Default Login URLs

To disable the default WordPress login system, add a PHP snippet to redirect users to your custom login page.

Adding the PHP Code

1. Use a Child Theme or Code Snippets Plugin:
   • If you’re using a child theme, go to Appearance > Theme File Editor and open the functions.php file.
   • If you prefer, use a plugin like Code Snippets to add the code.
2. Paste the Code:
   • Add the PHP snippet to redirect /wp-admin and /wp-login.php to your custom login page.
3. Update Slugs:
   • If you changed the page slugs, update them in the PHP code.

Testing the Redirect

1. Open /wp-admin or /wp-login.php in an incognito window.
2. Verify that it redirects to your custom login page.

Step 6: Showing Different Messages for Logged-In Users

To improve the user experience, show a different message to logged-in users on the login page.

1. Duplicate the Wrapper:
   • Create two wrappers:
     • One for logged-out users (with the login form).
     • One for logged-in users (with a personalized message).
2. Add Dynamic Data:
   • Use Dynamic Tags to display the user’s first name (e.g., “Hi, [First Name]”).
3. Set Visibility Conditions:
   • Use the Block Visibility plugin to show the appropriate wrapper based on the user’s login status.

Step 7: Adding to Your Starter Site

While this setup takes some time, it’s worth adding to your starter site. By creating a generic design for your login system, you can reuse it for future projects without having to rebuild everything from scratch.

Wrapping Up

With WS Form Pro and a few tweaks, you can completely redesign the WordPress login system to match your site’s branding and improve the user experience.

This setup is flexible, scalable, and easy to maintain. Whether you’re building a client site or your own, it’s a great way to elevate the login process.

I hope this tutorial helps you create a better login system for your projects!