Do you want to add more brand value to your site? Do you want to keep the look of login page fresh for the users who regularly log into your site? If yes, simply create a WordPress custom login page.

If you are running a membership site or blog, you may need a login page. A login page makes users to signup and login using their credentials. It allows them to visit, share and contribute to your site by via posts, images, videos, or comments. But, WordPress provides a default generic login page. It doesn’t give any built-in options to add your own logo and change the feel of a page to match your theme. It is far behind to result in an ideal login page. So, a WordPress custom login page will play an important role here. A custom login page is crucial to add your own branding to the site. You can add more fields to get more information from the users. Moreover, it facilitates you to limit the admin panel access by specifying user roles. In short, a WordPress custom login page offers many benefits with a pleasing user experience.

Different Methods to Create a WordPress Custom Login Page

It is always better to create a custom login page rather than a boring WordPress login page. At the most, you can add your own logo and white label to the admin panel. But what about the admin panel access? So, if you don’t want the access of admin panel to every logged in user, you need a custom login page. But, how to create a custom login page for WordPress? There are two basic methods to create your own custom login page as follows

 

1. Create a Custom Login Page WordPress without Plugin

You can make a WordPress custom login page by using code. It needs basic skills in HTML, PHP, CSS etc. You will make changes to function.php file of your theme. However, remember that you will lose these changes if you update WordPress.

The Basic Modifications to Customize a Login Page

There are some basic things that you want to change your custom login page. For that, the main modifications you can do are as follows

  • 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.

How Will You Proceed?

WordPress doesn’t load your theme stylesheet as the login page isn’t part of the WordPress theme setup. So, you have to make 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.

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

function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');

The resultant WordPress custom login page will look somewhat like this

resultant WordPress custom login page

Now, let’s see the particular CSS code to make specific modifications

  • Adding a Custom Background

You can add any background image 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. 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

Now, you will modify the Login form look to match your site appearance. You can set the padding, margin of the form. You will also like to 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. You can redirect it to some other URL as follows

function custom_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

function custom_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. But it can be misused so you can remove it. You will simply add this code

p#nav
{
display: none;
}

  • Remove the “Back to” link

The “Back to…” link lets users return to the homepage. But if you want a simple clean look, you can remove it. For this, you will add this

p#backtoblog
{
display: none;
}
  • Hide the Login Error Message

Sometimes users enter the wrong information by mistake, it will result in generating Login error messages. 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. They can then gain access to your site. So, it’s better to change the error message in function.php file as follows

function custom_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.

function custom_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

function custom_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 {
return home_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' );
function default_rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

This was all about customizing a login page with code. You can try out all the modifications to simple CSS code.

 

2. Create a Custom Login Page WordPress using TemplateToaster Plugins

If you don’t have much coding skills, you can opt more convenient way to create a custom login page than coding i.e using plugins. There are a number of plugins available in WordPress repository to customize a login page. Though the popular plugins are as follows

Creating a WordPress Custom Page Login using Login Customizer Plugin

Login customizer is one of the most suitable WordPress custom login page plugins. Once you install and activate it, you can see it in under Appearance section of the left pane in the WordPress Dashboard. As you click on it, you can Start Customizing your login page as shown below

Appearance → Login Customizer → Start Customizing

create WordPress Custom Page Login using Login Customizer Plugin

It will redirect you to the Customizer screen. Where you will find the Login Customizer option. As you click on it, it will show you the default login page as shown below

Customizer screen of Login Customizer Plugin wordpress custom login page

From here, you will start redesigning it. The first option is to add a new Logo.

logo settings in wordpress custom login page

Here, you will select a logo image by browsing it.

logo image selection wordpress custom login page

Then set the Logo Width, Logo Height, and Padding Bottom. Click Change Image to set your custom logo instead of WordPress logo.

width, height, padding bottom settings of logo wordpress custom login page

Select Background option to add a background image to the login page. It will give a nice touch to the login page.

background image settings of logo wordpress custom login page

Click Select Image button as shown below to browse the required background image.

selection of background image wordpress custom login page

Once the image gets uploaded, click on Change Image to apply it.

applying selected image wordpress custom login page

Form Background option is there to change the color of form area. As here a little dark form background is set instead of white.

color settings of form areawordpress custom login page

You can also set a background color as shown below

form background color settings wordpress custom login page

You can change the form height, width, padding and border from Form Styling option.

form styling settings wordpress custom login page

Set the different attributes as shown below. And, you can see the visible effects as the form gets widened.

more form settings wordpress custom login page

Do the Field Styling by specifying the Input field width, Margin, Background, Label color as shown below

field styling settings of form wordpress custom login page

You can change the different attributes of a button like a Background, Border, Color from Button Styling option.

button styling settings of form wordpress custom login page

You can also set other things like Text color or attach a custom CSS from Other option.

other form settings wordpress custom login page

Then, publish this page to get your own custom login page.

Popular Plugins to Create a WordPress Custom Page Login

Some of the other useful WordPress custom login page plugins are as follows

 

1. Theme My Login

Theme My Login is a top-rated custom login page plugin. However, you can also create custom registration and profile pages, custom emails, etc. along with the login page. You will just configure the TML login settings by clicking the TML menu. The relevant features will be enabled and visible under TML option in the Menu. It also avails the custom login widgets. You can add a TML widget to the sidebar by visiting Appearance → Widgets.

Theme My Login plugin settings wordpress custom login page

  • Active installs: 100,000+
  • Rating: 4.3

 

2. Admin Custom Login

Admin Custom Login is a powerful custom login page plugin. It provides you a lot of features to edit background color and image, login form color, font size and position and much more. You can also add a background slideshow and social media icons on the form. All the designs prepared with it are mobile-friendly. It provides you a wide range of Google fonts and color schemes. It’s really simple to work in its setting panel.

settings panel of admin custom login plugin wordpress custom login page

  • Active installs: 50,000+
  • Rating: 4.8

 

3. LoginPress

LoginPress is another good custom login page plugin. It gives you lots of features to change the layout of the login page including logo image, width, height, padding, URL, and title, background image or color, login form image or color, width, height, padding, and border etc.

loginpress plugin settings wordpress custom login page

It provides the great feature to modify login error messages, forgot error messages, registration error messages, forget password hint message. You can do all modifications by opening up the Customizer that appears under LoginPress → Settings in the left main menu of the dashboard.

customizer settings of loginpress wordpress custom login page

  • Active installs: 10,000+
  • Rating: 4.9

 

4. Custom Login Page Plugin

Custom Login Page By SeedProd enables you to customize a default WordPress login page in minutes. It provides you a Real Time Customizer Editor to change logo, background, button, form, text etc. you can also add your custom CSS to a login page.

Customizer editor of WordPress Custom Login Page Plugin

  • Active installs: 3,000+
  • Rating: 5

 

5. Custom Login Page Templates

You can also use WordPress Custom Login Page Templates plugin to create a custom login page. You can upload your own logo and a full-width background image. It also has a feature to attach your own custom CSS.

custom login page settings wordpress custom login page

It provides you 5 different custom login page templates as shown below

different custom login page templates wordpress custom login page

  • Active installs: 2,000+
  • Rating: 4

 

6. Custom Admin Login Page WPZest

Custom Admin Login Page WPZest plugin enables you to create a custom admin login page. It has all the basic features to edit logo, background, form input fields, text and button etc. in addition to this, you can also add the Google reCaptcha in form. On the top of it, you can hide the Forgot Password Link or Back to Blog Link too. It enables you to create your own unique WordPress custom login page.

Custom Admin Login Page WPZest plugin settings wordpress custom login page

  • Active installs: 500+
  • Rating: 5

Wrapping Up

A custom login page plays a great role in social media engagement and email marketing. It should look like a part of the site layout. Putting efforts to customize a WordPress login page of your site is proportional to building your brand. It will give a personalized online experience to the users.

We would love to hear about your customization experiences. Please share in the comment section below.