Build A Custom WordPress Login Page (the right way)

Building custom WordPress login page ain’t that hard. Nevertheless I’ll show you how to create one. I’ll share how to make it reusable as much as possible and explain what problems you might encounter after you’ve completed the custom WordPress login page implementation.

Goal

For the tutorial purposes of this WordPress login page post, we’ll develop a lock for our site, which means that visitors will not be able to see any part of the site until they login (authenticate). The following scenarios will be covered:

• User did not enter the username and/or password
• User entered invalid credentials
• User logged out
• User is not logged in

There are many more scenarios that you can handle and implement but we’ll just stick to these basic ones for now.

Tools

In order for us to create our site lock we will need to use some built-in WordPress functions, filters and actions.

Functions:

wp_login_form – Generates the login form HTML

get_page_by_title – Returns the WP_Post instance of the page whose title matches the given $title parameter

get_permalink – Returns the permalink for the page with with the given $id

is_user_logged_in – Indicates if the user logged in or not

wp_redirect – Used for the redirection purposes

Filters:

authenticate – We will use this one to validate that the username and password fields are not empty

Actions:

parse_request – We’ll hook into this one in order to check is the visitor is logged in (can he see the requested page).

wp_login_failed – Used for redirection to custom login page, if the login attempt failed

wp_logout – Used for redirection to custom login page  in case when the user logs out

Implementation

First we need to go to the WordPress site administration and create a new page called “Login” (You can choose any name you wish). Once you do so you’ll also need to create a template for that same page.

You can see that we have implemented the WordPress login form inside the page-work template using the wp_login_form function. Now, if you visit the /login page you should see the login form appear.

Building and implementing the lock

In order for us to lock rest of the site for non-logged-in users we will need to create the lock.php file in which we’ll implement the Lock class.

Our class now has three private members. Those members hold WP_Post instance of the login page permalink that leads to the login page and boolean member that indicates it’s the current login page. The class also has a constructor function which accepts a reference to the WP_Post instance of a page that we wish to use as a login page.

It also configures our three private members. The next thing we need to do is put our three private members into good use. We’ll do so by implementing 1 method for each functionality that our lock needs to have. Equally we’ll add a private helper method called “subscribe” that will hook our methods (functions) to WordPress activated actions and filters.

Our parse_request method is now hooked to the parse_request action. It parses every user request in a way that it redirects users to the login page if they are not logged in and if the current page is not the login page (also it checks if the login page exists). Other methods that we have implemented are used for redirection purposes and username and password validation as well.

Locking it down

Our lock is now ready to go and the only thing left is for us to do is activate it.

And that’s it. Our site is now fully locked down for non-logged-in users!

Issues

The only issue that we have experienced happened on the WPengine platform where the lock mechanism worked on the staging environment but didn’t work on the production environment. However, we have found a way around it by adding “^/login” to the cache exclusion list and by adjusting the login_failed method.

We’re still trying to figure out why this happens on the production environment and once we do – we’ll update this post.

So there you have it. How to build a WordPress login page – the right way.