How to Create a Custom Login Page With WordPress

When it comes to WordPress, there is no argument that it is one of the best platforms to host your website on; it certainly stands out on account of its robustness, adaptability and more importantly, on account of its ease of use.

But if you are planning to set up your first website, then you may want to consider setting up a custom login page for your customers to use, instead of the usual WordPress login page.

For starters, using the staid old WordPress login page is slightly unprofessional and unappealing to say the least – why shouldn’t you go the extra mile to set a custom page for your customers to login with?

The process to set one up is fairly easy, you can either do it manually or by installing a special plugin which automates the process of setting one up.

But remember that when it comes to setting one up manually, any and all changes that you make to the theme may get deleted when you update your WordPress. The process for both manual and for the plugin is posted below, for your reference.

1. Create a Custom Login Page WordPress without Plugin

When it comes to setting up the custom login page manually, the only requirement is that you need to be quite adept at HTMP, PHP, CSS3 etc.

You can create your own custom WordPress login page with ease – just follow the directions posted below. You will need to head over to your theme file and make the changes in the function.php file.

The Basic Modifications to Customize a Login Page

These are some essential changes that you would want to carry out to your main WordPress login page, starting with the background to the logo itself.

Incorporating these changes should help make your custom login page appear more professional and make it stand out for all the right reasons.

• Add a custom background.
• Add a custom logo.
• Customize the look of the login form.
• Change the login logo URL.
• Remove the lost password link.
• Remove the “Back to” link.
• Hide the login error message.
• Remove the login page shake.
• Change the redirect URL.
• Set “Remember Me” to checked.

Related Post:12+ Best Free WordPress Custom Login Plugins

Here’s what to do next:

WordPress doesn’t load your theme stylesheet as the login page isn’t part of the WordPress theme setup. So, need to come up with your own stylesheet for the custom login page.

Before that, you will create a new folder in your theme folder called Login. In this, make a new .txt file and save it as custom-login-style.css. Please make sure that you remember the file name as you would require it soon.

Once you have a CSS for the login page, you have to tell the WordPress to load it explicitly. For that, you will put this code in function.php so that it loads this particular file perfectly.
—

functionmy_custom_login()
{
echo '';
}
add_action('login_head', 'my_custom_login');

This should show up immediately, you can preview the changes to see if the stylesheet has been loaded properly or not. Pay attention to the CSS code as even a small mistake can prevent your custom login page from loading. Let’s move to the next step of the process and that’s adding custom background.

Adding a Custom Background:

You can add any background image of your preference to your login page. Just specify it’s correct name in the 2nd line of your custom page CSS. The code to set the background is as follows

Body.login
{
background-image:url("../image/login-page-bg.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Adding a Custom Logo:

This is the most crucial step to mark a brand identity. Most users prefer to go ahead with the WordPress logo but that’s a mistake especially if you are setting up a brand new business website.

One of the reasons why you need to set up a custom login page is so that you can use this to rebrand yourself. You can add your own custom logo in place of WordPress logo. Save the custom logo image to the Login/image folder. You will do that as follows

login h1 a {
background-image: url("../image/logo-1.png");
background-size: 75px;
}

Customizing the Login Form:

This process may appear overwhelming to those who are new to coding but it is quite simple and cann be done in a matter of seconds. You need to modify the Login form look to match your site appearance.

You can adjust the padding, margin of the form. You should also change the background color, label etc. for this, you can refer the following sample code

.login form{
box-shadow:none;
padding:20px;
}
#login {
background:
#FFF;
margin: 50px auto;
padding: 40px 20px;
width: 400px;
}
.login label {
color:
#555;
font-size: 14px;
}
.login form .forgetmenot{
float:none;
}
Further to modify submit button look, you can set margin, border, height, width, the color of it. So, include these lines to your CSS

#login form p.submit{
margin-top:15px;
}
.login.wp-core-ui .button-primary {
background:
#7B417A;
border-color:
#7B417A;
box-shadow: 0 1px 0
#7B417A;
color:
#FFF;
text-shadow: none;
float: none;
clear: both;
display: block;
width: 100%;
padding: 7px;
height: auto;
font-size: 15px;
}

Change the Login Logo URL:

The Logo URL links to WordPress.org by default. But with the coding listed below, you can redirect it to some other URL as follows

functioncustom_login_logo_url() {
returnget_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

functioncustom_login_logo_url_title() {
return 'Default Site Title';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

Remove the Lost Password Link

Lost password link is useful when you forget your password. Granted it can be quite useful but this feature has often been misused to the point that it is now considered as risky to put it on your website. Just add the codes listed below and that should do the trick.

p#nav
{
display: none;
}

Remove the “Back to” link:

The “Back to…” link lets users return to the homepage. But this can make your website appear a tad retro, not to mention that it just adds to the clutter. It is always a good idea to remove this particular page element. For this, you will add this

p#backtoblog
{
display: none;
}

Hide the Login Error Message:

Login error messages are often generated when the user enters the wrong ID or password. The reason could be any, either the username is incorrect or password is wrong. This message is useful for users but creates a gap as hackers can crack the user login credentials.

This is why the login error message can pose a security risk as it enables hackers to gain access to your site. So, it’s better to change the error message in function.php file as follows

functioncustom_login_error_message()
{
return 'Please enter valid login credentials.';
}
add_filter('login_errors', 'custom_login_error_message');

Remove the Login Page Shake:

The login form shakes when the user submits the wrong login credentials. But if you don’t like this feature, you can remove this.

It was cute when WordPress first introduced this but it has outlived its functionality and these days, it makes the website look unprofessional and a bit puerile as well.

functioncustom_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'custom_login_head');

Change the Redirect URL:
If you log into WordPress, it redirects you to dashboard directly. You can redirect all to the homepage except administrator as follows

functioncustom_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) &&is_array( $user->roles ) ) {
if(in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
returnhome_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "custom_login_redirect", 10, 3);
Set “Remember Me” to Checked
Remember Me box is unchecked by default. You can change it to checked state as follows:

add_filter( 'login_footer', 'default_rememberme_checked' );
}
add_action( 'init', 'default_checked_remember_me' );
functiondefault_rememberme_checked() {
echo "document.getElementById('rememberme').checked = true;";
}

This was all about customizing a login page with code. You can try out all the modifications to simple CSS code. You can copy, paste it and with it, you should be set.

2. Creating a custom login page with template toaster plugins:

There are more than few plugins that you can use but template toaster plugins are better to use for the same. By installing this particular plugin on your website.

You should be able to set up your own unique custom login page which should make it possible for you to rebrand yourself and reach out to more customers as a result.

The login page can be customized easily and this particular plugin allows you to do just that – from the padding to the margins and even the logo and background images.

So check out this plugin and install the same on your website at the earliest. You can also try out theme my plugin, Admin custom login among other plugins as well. You should be able to set up your custom login page in under few minutes.