Creating a Custom Login Page to Redirect Users from the Default WordPress Login Screen

• October 7, 2016
• Leave a comment

The default WordPress login screen looks simple and boring. For displaying your own brand instead of WordPress on login screen, you can create a custom login page. Following is the default WordPress login screen:

In this article, you will learn how to create a custom login page and redirecting users from the default WordPress login page to new custom login page.

You can create a simple WordPress login page from WP Dashboard by using a login shortcode. The other way to do that is by creating a template in your Theme. Add the following code in your Theme’s functions.php file and then assign that template to a page:

Let’s assume that the default WordPress login page URL is http://example.com/wp-login.php. Once a custom WordPress login page is created, it’s URL will be http://example.com/login as shown in the figure:

If anyone tries to access the default login page, it will be redirected to the new custom login page. Add the following code in your Theme’s functions.php file:

This code will check the current viewed page i.e. “wp-login.php”. If the request method is “GET” then it will simply redirect the user to the new login page using wp_redirect() function. When the form is submitted, the request method will be changed from “GET” to “POST“.

If a user tries to login into your website from the new login page i.e. http://example.com/login and the login fails. The user is then redirected to the new login page but with some notification variables. The login request goes to wp-login.php by default. To achieve this functionality, add the following code:

When a user login is failed, wp_login_failed hook is called. Now, add an action to redirect it to the new login page with the variable login=failed to show login failed notification to the user.

If a user tries to login without entering the login credentials, the authenticate hook is called. Now, you need to add this hook to redirect users to your custom login page by using the following code:

A filter has been added to the “authenticate” hook. Now check whether the user-name and password inputs are empty or not. If empty then redirect the user to the new login page with the variable login=empty to display a notification to the user.