WordPress is undoubtedly the best free content management system now powering about 60% of the websites in the world. Using WordPress as a CMS comes with some limitations especially when you are building a brand focused website. By default WordPress login screen and the dashboard comes with the default WordPress logo. Creating a custom login page becomes inevitable if you are using WordPress as a CMS.

Login into WordPress

There are free plugins available in WordPress repository that you can use to customize WordPress login screen but they also come with their own limitations. In this tutorial I will show you how to create a branded custom login screen for your WordPress site.

Developing a custom login for your website allows you to visually integrate your website design concepts and the brand logo. This is not only visually appealing but also helps your customers or users identify with your brand.

Here is the final custom login page from this tutorial:

Final Result

Development of Custom Login Page

To create a custom login in WordPress, you can either create a plugin or create a page template in your theme. For the purpose of this tutorial I will focus on the latter.

Creating a custom login page for your theme allows you to ship the theme with the feature, something that might be useful for premium themes developers. You can also add this custom page to an existing WordPress theme.

Designing the Page

The first step is designing the custom login page to incorporate the brand identity and your custom website design impression. For this tutorial we will be building a custom login page for a fictitious paint company called Rangi’. The basic design of the custom login page looks like the screenshot below:

Final Design

Coding the Page

For us to create this login page we will require a custom page template on which we will later add the WordPress login form. We will further test for login errors and implement redirects and restrictions to the users who login.

We can allow users to access certain pages and restrict their access to the WordPress dashboard. This is an important feature for a membership site or a customer relationship management website.

  • Creating Page Template

We begin by creating a page template for the login page. In your theme create a new page template using the code below:

The next step is to publish the login page from WordPress dashboard and assign this page to the template we created above.

Page Template

This page is just like any other WordPress page in our theme since it has the header and the footer. To turn it to a login page we need to add WordPress login form and customize it to our preference.

  • Custom Header for Login Page

Before we add WordPress login form to this page, you can choose to remove the header and footer or create a custom header and footer for the login page.

Custom Header for Login Page

If you need to create a custom header for the login page, you may remove some features like the menu or style it differently.

Copy the original theme header.php file and remove the features you don’t want on the login page header and save it in your theme folder as login-header.php.

After saving this file we should now edit the get_header() function to specify the login header. In this case we can add the custom header we just created as follows:

We can also create a custom footer and replace your default theme footer. In this tutorial I have will not have the footer in the login page.

WordPress Login Form Function

We have created the login page template now we need to create the login form and style it to match the branding needs.

Fortunately, creating the WordPress login page is not difficult since there is a WordPress function for creating this form and we can pass parameters in the array to manipulate the form. Here is the array we will use to create the login form.

Ref: https://codex.wordpress.org/Function_Reference/wp_login_form

We now should add this form to our login page template. Before we add this form to the template page we need to create the HTML structure for the page. We create the HTML structure based on the login page design. Here is the HTML markup for the page;

We should now add the login form and the logo then view the page to see the progress. We begin by adding the logo image uploaded in the images folder.

<img src="<?php echo get_bloginfo('template_url') ?>/images/Rangi Logo.png"/>

After adding the logo image we now add the login form, the homepage link and the reset button, here is the complete code;

The result for this part is as shown in the screenshot below:


Styling the Login Page

We now style the page to improve the appearance to fit our website design. The following is the CSS code to style the login page;

It is important to note that while styling your login page you can choose to override some theme styles using dynamic CSS or you can style the login page to match your theme CSS styles.

You should also remember to enqueue stylesheet in your custom header if you use a separate custom stylesheet.

The final product should look like the screenshot below:

Final Result

We have created the login template page, added the login form and styled it. We should now login successfully but we need to further add functions to enhance our login process and make it smooth for users.

Login Redirection, Restrictions and Error Management

Finally, we need to address a few issues before we can complete our custom login page. We need to create a custom page for password reset, we need to have a member’s area where we can redirect members to when they login and finally we need to devise ways of handling errors resulting from unsuccessful login attempts. We also need to notify the user when the login attempt fails.

1. Redirection

  • Redirecting Users to Member’s Area or Page

When the user login they should be redirected to members area instead of default WordPress dashboard. To achieve this we need to edit the template page to redirect users to members’ area.

We should change this default redirect array key to redirect the users to members area when the login is successful.

Here we are using the get permalink () and get page () functions to redirect the user to the member’s area.

  • Redirecting wp-login.php URL to Custom Login Page

We also need to make wp-login URL inaccessible and instead the users are redirected to the custom page we created. We edit the function.php file by adding the following code;

Note: For this to work the variable ($login_page) we have created in the code above should be substituted with the respective variable in your custom login page.

  • Redirecting Users after Successful Logout

By default when users logout they will be redirected to the wp-login.php page. We need to redirect them to the custom login page after they have logged out. We further edit the functions.php by adding this code

2. Error Management

When dealing with forms, validation becomes necessary since we anticipate errors that can occur when logging. The two most errors we will deal with are:

  • Empty username or password
  • Incorrect username or password

When these errors occur we need to display error notification to the user as well as redirect the user to the custom login page since the default WordPress failed login attempt redirects to WordPress dashboard.

We can achieve by adding some code on the custom template page to test for different conditions and display the error message as well as redirect the user.

Failed Login Attempt

  • Testing Failed Login Attempt

We should use the WordPress Action wp_login_failed to manage the failed login attempts when the password and the username are incorrect. To achieve this we should add this code to function.php file

When the login fails we are checking the URL the login attempt came from and whether it is the default wp-login.php we then pass a querystring parameter of failed login and a redirect.

  • Checking if Username or Password is Empty

We now need to check if the username or the password is empty for us to notify the user with an error message on the custom login page. To check if the password or username is empty we add the following code to functions.php file

Displaying the Error on the Login Page

We should now edit the custom login page template to display the error message when there is a failed login attempt. We add this code to WordPress login form code:

The complete WordPress login form code should look like this

Finally, we now style the error message by adding the following code to the CSS:

The error should be displayed as shown in the screenshot below:

Wrong Password Screenshot

3. Password Reset Custom Page

When you click the password reset button you will be redirected to the default password reset page. We need to further customize this password reset page to suit our brand identity.

I will cover this topic comprehensively in the next tutorial.


This is one of the many ways of customizing WordPress login page unlike using plugins this approach allows you to create your own design and implement your brand identity. I hope this tutorial helps you create your own custom WordPress login page.

For additional information, questions, feedback and assistance feel free to get in touch in the comments section below.


The following are useful references when creating the custom WordPress login page.

WordPress Codex: