One of the things I want to do as a web development agency is to have a customized version of login page which presents my company instead of default page, but without a plugin. to achieve this I need to do the things below:
1- Create a directory in the active WP theme naming “login”
2- Create a CSS file in the folder login naming “custom-login-style.css”
3- Force WP to read this style for the login instead of the default styles using the PHP code below in the functions.php of the active theme
/* custom Login screen */
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');
4- Define the CSS styling of the page as below:
#login {padding: 10%;}
.login h1 a{
background-image: url('https://miladnaderzad.com/wiki/wp-content/uploads/2024/05/favicon.webp');
background-size: 150px !important;
height: 150px !important;
width: 200px !important;
pointer-events: none !important;
}
body.login {
background-image: url('https://semilgreenweb.de/login-background.webp');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.login form{border-radius: 16px !important;
background-color: #f2f2f2;}
.login form .input, .login form input[type=checkbox], .login input[type=text]{
background: #1111;
border: 1px solid #00284e;
border-radius: 32px;
}
.wp-core-ui .button-primary{
background: #0067a5;
border-color: #0067A5;
border-radius: 32px;
}
.login #backtoblog a, .login #nav a {
font-size: 14px;
color: #f2f2f2 !important;
}
.login .message, .login .notice, .login .success{
border-radius: 16px !important;
}
The background image and the client logo are stored in our dev zone https://semilgreenweb.de
5- Minified version of the CSS is then will be added to the custom-login-style.css to make sure it will not affect the performance.
#login{padding:10%}.login h1 a{background-image:url(https://miladnaderzad.com/wiki/wp-content/uploads/2024/05/favicon.webp);background-size:150px!important;height:150px!important;width:200px!important;pointer-events:none!important}body.login{background-image:url(https://semilgreenweb.de/login-background.webp);background-repeat:no-repeat;background-attachment:fixed;background-position:center;background-size:cover}.login form{border-radius:16px!important;background-color:#f2f2f2}.login form .input,.login form input[type=checkbox],.login input[type=text]{background:#1111;border:1px solid #00284e;border-radius:32px}.wp-core-ui .button-primary{background:#0067a5;border-color:#0067A5;border-radius:32px}.login #backtoblog a,.login #nav a{font-size:14px;color:#f2f2f2!important}.login .message,.login .notice,.login .success{border-radius:16px!important}