How to Create a WordPress Frontend Login Page - ProfilePress

How to Create a WordPress Frontend Login Page

Do you want to create a front-end login page for your WordPress website?

Many websites prefer a custom front-end login page because the default WordPress login area is not pleasant to look at, more so because it doesn’t blend with your website looks. Instead, it looks like another entire website.

In this article, you will learn how to create a front-end login page for your WordPress site using the ProfilePress plugin, which provides the best user experience and removes any confusion for your users.

ProfilePress is a membership and user profile plugin that allows you to create front-end login and registration forms and user profiles that are easily customizable and mobile responsive.

Installing the ProfilePress Plugin

First, you will need to install and activate the ProfilePress plugin from the WordPress repository by going to Plugins>>Add New and searching for ProfilePress.

After activating the ProfilePress plugin, the process creates some pages for you that include a default custom login page. However, we will create an entirely new login form for this guide.

Creating the Login Form

To create your form, go to ProfilePress>>Forms & Profiles and click on ‘Add New’, select the Drag & Drop builder, give your form a name and choose a suitable template from the displayed options.

After creating the form, you can customize it with the drag & drop builder to your taste and add/remove fields as required and click the save changes button.

Login form configure settings

ProfilePress forms also come with social login support to ease the login process for your users. You can read this article on configuring the social login of your choice.

After saving your changes, copy the form shortcode as displayed below the form name. Please take note of this, as it will be added in the next step.

Creating the Login Page

After creating the form to your satisfaction, you should create a page that will display your form to users.

To do this, from your WordPress dashboard, go to Pages>>Add New and give it an easily recognizable name like ‘Login’ or ‘User Login’ and paste the login form shortcode you copied from the previous step.

Preview the page to see how it looks on the front end of your WordPress site.

Redirecting the Default WordPress Login Page

After creating your custom login page, you need to set it as the default login page in the global settings of ProfilePress so that users are redirected to the page when they visit the default WordPress login page located at /wp-login.php.

Follow the steps below to achieve this.

  1. Hover on ProfilePress and click on Settings
  2. Select the Pages tab
  3. Scroll down to the login page section and select the new custom login page.
  4. Click on Save Changes.

After completing the above steps, users visiting will be redirected to your front-end custom login page.

We hope this article helped you add a front-end login page and widgets in WordPress. You may also want to see how to create a WordPress membership site and how to create custom user registration forms.

If you have more questions, ask our support team anytime.