Blog

In this article, we’ll learn about How to Create a Custom WordPress Login Page.

The Custom WordPress login page is an essential part of your website’s user experience. By default, it offers a generic login form that lacks personality and fails to align with your brand.

However, with a custom WordPress login page, you can create a seamless and branded experience that leaves a lasting impression on your users.

We will explore the step-by-step process of creating a custom WordPress login page, allowing you to enhance your website’s aesthetics and provide a cohesive user journey.

The default WordPress login page is functional, but it’s not very customizable. If you want to give your login page a unique look and feel, you can create a custom wordpress login page.

Steps to Create a Custom WordPress Login Page

• Add a Custom Background.
• Replace the WordPress Logo with our Custom Logo.
• Customize the look of the Login Form.
• Change the Login Logo URL.
• Remove the “Lost Password” link (if you want).
• Remove the Login Page Shake.
• Change the Redirect URL after successful Login.
• Set “Remember Me” to be Checked.

The login page isn’t a part of the theme setup. So WordPress doesn’t load your theme’s stylesheet on that page. But that’s OK. We will make our own stylesheet for the wordpress custom login page.

I’ll suggest you to make a new folder in your theme directory i.e. your_site_folder > wp-content > themes > your_theme_folder_name. So you have to make a new directory with the name “login”.

So first make a new stylesheet with the name login-styles.css in the login directory.

We have to tell WordPress to load this CSS file so open up your theme’s functions.php file and add the following code:

function custom_login_css() {
echo '';
}
add_action('login_head', 'custom_login_css');

Now let’s start Customization.

ADD A CUSTOM BACKGROUND

By default, WordPress adds a .login class to the body of the login page, so you can use this class to add your own background.

Add the following CSS to the login-style.css file:

body.login {
background: #411103;
}

You can change color as your requirement or you can also make an image as your background but remember to upload your image in login directory and write the path as “../login/your_image_name.png”.

REPLACE THE WORDPRESS LOGO WITH OUR CUSTOM LOGO

By default, there is a WordPress logo above our login form. We can change it with our custom logo. We’ll use .login h1 a class to add our own custom logo.

Upload your own logo to the /login directory and take note of its height and width.

Then add this code to your login-styles.css:

.login h1 a {
background-image: url('../login/logo.png');
background-size: 300px 72px;
width: 300px;
height: 72px;
}

Replace the background-size with the dimensions of your logo and also replace the logo.png with your logo name.

CUSTOMIZE THE LOOK OF THE LOGIN FORM

OK, now we are going to take a look at the Login Form style. I have added what I like but you can style yourself if you know CSS. If you like my design then you can copy my style.

Add following code in you login-styles.css:

.login form {
margin-left:auto;
margin-right:auto;
padding:40px;
border-radius: 10px;
background-clip: padding-box;
background: #718FC8;
overflow: hidden;
}

Now we will change our text color

.login label {
color: #FFF;
line-height: 26px;
}

And now style our Log In button

.login .button-primary {
float:right;
background-color: #518AA4;
text-shadow: #333333 0 1px 0;
color: #FFF;
}
.login .button-primary:hover {
background-color: #08385C;
text-shadow: #333333 0 -1px 0;
color: #fff;
text-decoration: underline;
} .login .button-primary:active { background-color: #08385C; text-shadow: #333333 0 -1px 0; color: #fff; }

CHANGE THE LOGIN LOGO URL

By default, the logo is linked to wordpress.org but we can change it and link it to your site. So open your fucntions.php file in your themes folder and add the following code:

function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' ); function my_login_logo_url_title() { return 'Your Site Name and Info'; } add_filter( 'login_headertitle', 'my_login_logo_url_title' );

So now the logo is linked to your site.

REMOVE THE “LOST PASSWORD” LINK

The “Lost Your Password?” link is helpful if you’ve lost your password, but if someone has hacked your email they will be gable to get hold of your WordPress password and take over your site.

So to remove this link add the following code to your functions.php file:

function remove_lostpassword_text ( $text ) {
if ($text == 'Lost your password?'){$text = '';}
return $text;
}
add_filter( 'gettext', 'remove_lostpassword_text' );

REMOVE THE LOGIN PAGE SHAKE

Some people are very annoying from WordPress shake alert. To remove this shake add the following code to your functions.php file

function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

CHANGE THE REDIRECT URL AFTER SUCCESSFUL LOGIN

When the user logged in on your site he will redirect to the dashboard of the site instead of the home page. You can change this redirection by adding the following code:

function admin_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", "admin_login_redirect", 10, 3);

From this code, all users other than the admin are redirected to the home page.

SET “REMEMBER ME” TO BE CHECKED

The “Remember Me” is unchecked by default. But you can change it by just adding the following code to your functions.php file:

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' ); function rememberme_checked() { echo "// "; }

That’s all!

By creating a custom WordPress login page, you can elevate your website’s user experience and reinforce your brand identity.

Follow the step-by-step guide outlined in this blog post to design and implement a custom wordpress login page that aligns with your website’s aesthetics and offers a seamless user journey.

Remember to test your custom wordpress login page thoroughly to ensure it functions correctly and provides a secure login experience for your users.

I hope this article helps to create a custom wordpress login page.