Hosting Tutorial & Guide

How to Make a Custom Login Page in WordPress for Better Design and Security

updated on Jun 06, 2015
How to Make a Custom Login Page in WordPress for Better Design and Security Customizing the login page of your WordPress site brings two substantial benefits. On the one hand, it allows you to apply your own design to the background, logo and login form. On the other hand, it helps increase the website security by changing the error message and some other vital factors.

To make a custom WordPress login page by editing CSS is somewhat hard and time-consuming if you are not experienced in coding and theme design. Therefore, we will focus on how to achieve the goal by using the Erident Custom Login and Dashboard plugin. However, as this plugin has limited features, some simple coding tips will also be introduced later.

Note that we currently do not recommend Custom Login. This plugin is indeed more powerful and popular than Erident, but it now receives many complaints that it does not work at all. We have confirmed the complaints as we tried to use it but failed. Nothing was changed, even though we deactivated and re-installed it for several times. It would not be a good option until the designer fixes this problem.

The login page shown below is what we would like to make in this tutorial.

WordPress Login Page Example

Change the Background Image

After installing the needed plugin and activating it, clicking on the Settings link below the plugin name gets you to the control panel of Erident. There are a large number of design settings on the page, and we will deal with the background at first.

For the design of the background, you can either set a single color, or use a high-quality image which is good for large screens. But if you care much about the speed of your site, you'd better not use a large image because it can be heavy to load. Similarly, use a solid color only in the case that you are running a membership site where a large number of users can access the login page.

Adding a background image is easy with Erident. You can select an image from your media library, or upload an image from the local computer directly. The procedure is nearly the same as inserting a featured image in a post. To ensure a good display, you can set the size of the image as "Large" or even "Full Size".

Below are the configurations we have made for the background of our login page. From the screenshot you can see that the options are all easy to understand.

Background Configurations

After saving the changes, we get a customized background like this:

Custom Login Background

Add a Custom Logo

Firstly, prepare your logo. Save the image in .png so that it can suit any background. Secondly, click on the Add Logo button and upload your image by using WordPress media uploader. According to the dimensions of your image, you need to modify the Logo Width and Logo Height. At last, change the text shown for your logo.

Custom Login Logo

Erident does not offer an option for customizing the link on the logo, but by default, the URL is changed to the homepage of your website. If you want to replace the default URL with another address, you have to deal with some coding, which will be discussed later.

Customize the Login Form

Erident has a pre-made style for the login form which looks pretty already. You can use it by changing nothing, or make a new custom form by yourself according to your preference. The plugin allows you to customize:
  • The size of the form.
  • The border style & color.
  • The background color, image & position.
  • The color and size of the text & link.
  • And so on.
The customization options are very rich so that you can configure things completely in your style. Experiment more to work out a form that matches your expectation perfectly. Now our login form looks like this:

Custom Login Form

Custom background, logo and login form are all you can expect from Erident. If you want a beautiful appearance for the login page only, you can stop here. Below are some more steps for enhancing your login page. Coding is needed.

Change the Logo URL

As is mentioned before, Erident pre-configures the logo URL to be the address of your homepage and does not allow you to make a change. So if you are using the plugin and would like to direct users to another location on your site, you have to add some lines of code to the functions.php file. Remember to replace the URL in the code.

function my_logo_url() 
{
    return 'http://blog.besthostingsearch.org/about-us/';
}
add_filter( 'login_headerurl', 'my_logo_url' );

The code is simple and easy to understand. If you are interested and want to try out more, you can also use the code below to customize the title of the logo URL.

function my_logo_url_text() 
{
    return 'Ariel's Personal Blog';
}
add_filter( 'login_headertitle', 'my_logo_url_text' );

Change/Remove the Error Message

For incorrect login credentials, the system returns an error message telling the user that either the password or the username is wrong. When an attacker tries to guess a username and the corresponding password, this message can help him/her know the progress, which makes your login more vulnerable.

Login Error Message

Therefore, our suggestion is to hide the error message from users, or change the message to a custom one which does not tell the user which part of the login credential is incorrect. Again, you need to insert some code in the functions.php file.
  • Code for hiding login error message:
add_filter('login_errors',create_function('$a', "return null;"));
  • Code for changing login error message (The message in the code can be changed to anything you like):
add_filter('login_errors', create_function('$a', "return '<b>ERROR:</b> Incorrect username or password.';"));

Redirect Users After Successful Login

By default, when users log into your website successfully, they are redirected to the WordPress dashboard automatically. This seems normal for traditional blogs, but you will want to redirect some users to another location if you allow user registration. Most users on a forum or membership site do not need access to the backend admin interface.

The code below is the solution for you. Only administrators are allowed to access WordPress admin, while other users are redirected to different locations based on their user roles.

function my_admin_redirect( $redirect_to, $request, $user ) 
{
    if ( isset( $user->roles ) && is_array( $user->roles ) ) 
    {
        if ( in_array( 'administrator', $user->roles ) ) 
        {
            return $redirect_to;
        } 
        else 
        {
            return site_url();
	}
    } 
    else 
    {
        return site_url('http://blog.besthostingsearch.org/custom-page/');
    }
}
add_filter( 'login_redirect', 'my_admin_redirect', 10, 3 );

The code may seem a little bit difficult, but it is useful. With this code, the function checks the role of the user first and then decides where to redirect the user to. For administrators, the destination is the admin area; while other users are led to the homepage. When the rules above fail for a user, he/she will be redirected to a page specified by you. You can change the URL in the code to whichever page you like.