How to customize wordpress login page

How to customize WordPress login page

You can make more beautiful of your WordPress login page. here has include some css or you can do css by yourself.
Today i will show how you can customize your wordpress login page.
you can do it 2 way
1. copy all code and paste it in your functions.php file.
2. create another file and do include it in your functions.php file. e.g.
require_once(‘inc/custom-login.php’);
and paste all code in custom-login.php file

//login page css
function custom_enqueue_script(){ ?>
		<style type="text/css">
		.skyb_login.login input[type="text"],
		.skyb_login.login input[type="email"],
		.skyb_login.login input[type="password"],
		.skyb_login.login .submit .button-primary{
			-webkit-transition: 0.3s;
			-o-transition: 0.3s;
			transition: 0.3s;
		}
		.skyb_login.login .submit .button-primary,
		.skyb_login.login form .input{
			box-shadow: none;
		}
		.skyb_login.login .submit .button-primary,
		.skyb_login.login form,
		.skyb_login.login form .input,
		.skyb_login.login .checkmark,
		.skyb_login.login p.message,
		.skyb_login.login #login_error{
			border-radius: 3px;
		}
		.skyb_login.login .submit .button-primary:hover,
		.skyb_login.login #backtoblog a:hover,
		.skyb_login.login #nav a:hover{
			opacity: 0.85;
		}
		.skyb_login.login #backtoblog a,
		.skyb_login.login #nav a,
		.skyb_login.login #backtoblog a:hover,
		.skyb_login.login #nav a:hover		{
			color: #ffffff;
		}
		.skyb_login.login,
		.skyb_login.login .submit .button-primary{
			background: #8C7DFC;
		}
		.skyb_login.login .submit .button-primary{
			border: 1px solid #8c7dfc;
			font-size: 14px;
			height: 40px;
			padding-left: 25px;
			padding-right: 25px;
			text-shadow: 0 -1px 1px #8c7dfc, 1px 0 1px #8c7dfc, 0 1px 1px #8c7dfc, -1px 0 1px #8c7dfc;
		}
		.skyb_login #login h1 a{
			background-image: url('https://skybootstrap.com/wp-content/uploads/2017/12/skybootstrap-logo.png');
			background-size: 100% auto;
			width: auto;
			margin-bottom: 30px;
		}
		.skyb_login #login h1 a:active{
			border:none;
			box-shadow: none;
		}
		.skyb_login.login form .input{
			padding-left: 10px;
			padding-right: 10px;
			border:1px solid #8C7DFC;
			margin-top: 7px;
		}
		.skyb_login.login form .input:focus,
		.skyb_login.login input[type="text"]:focus,
		.skyb_login.login input[type="email"]:focus,
		.skyb_login.login input[type="password"]:focus{
			box-shadow: 0 0 2px rgba(140, 125, 252, 0.8);
		}
		.skyb_login.login .forgetmenot{
			margin-top: 7px;
		}
		.skyb_login.login .forgetmenot label{
			position: relative;
			padding-left: 15px;
			height: 27px;
			line-height: 27px;
			display: block;
		}
		 .skyb_login.login input#rememberme{
			opacity: 0;
			margin: 0;
			visibility: hidden;
		}
		.skyb_login.login input#rememberme:checked{
			content:none;
		}
		.skyb_login.login .checkmark {
			position: absolute;
			top: 0;
			left: 0;
			height: 25px;
			width: 25px;
			background-color: #f6f6f6;
			border:1px solid #8C7DFC;
			-webkit-transition: 0.1s;
			-o-transition: 0.1s;
			transition: 0.1s;
		}
		.skyb_login.login input#rememberme ~ .checkmark:hover {
			background-color: #ececec;
		}
		.skyb_login.login input#rememberme:checked ~ .checkmark {
			background-color: #8C7DFC;
		}
		.skyb_login.login .checkmark:after {
			content: "";
			position: absolute;
			display: none;
		}
		.skyb_login.login input#rememberme:checked ~ .checkmark:after {
			display: block;
		}
		.skyb_login.login .checkmark:after {
			left: 9px;
			top: 5px;
			width: 5px;
			height: 10px;
			border: solid #fff;
			border-width: 0 3px 3px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		.skyb_login.login p.message{
			margin-bottom: 5px;
		}
		</style>

<?php }
add_filter( 'login_enqueue_scripts', 'custom_enqueue_script' );

// custom js script
function skyb_custom_js_script(){
	 ?>
	<script type="text/javascript">
		document.getElementById('rememberme').insertAdjacentHTML('afterend', '<span class="checkmark"></span>');
	</script>
<?php }
add_action( 'login_footer', 'skyb_custom_js_script' );
do_action( 'skyb_custom_js_script' );

// login title
function custom_login_page_title( $opt ){
	$opt = 'Welcome to our skybootstrap';
	return $opt;
}
add_filter( 'login_headertitle', 'custom_login_page_title' );

// login url
function custom_login_page_url(){

	return home_url();
}
add_filter( 'login_headerurl', 'custom_login_page_url' );
// login faild hide
function custom_login_error_hide(){

	return 'Input Does  Not Match!';
}
add_filter( 'login_errors', 'custom_login_error_hide' );

// logon page body class
function login_page_body_lass( $login_body_class ){
	$login_body_class[] = 'skyb_login';
	return $login_body_class ;
}
add_filter( 'login_body_class', 'login_page_body_lass', 10, 2 );
How to customize wordpress login page reset password

Reset Password Page:

Watch the video How to customize WordPress login page

Watch the video How to customize WordPress login page
Spread the love

Published by skyboot

Skybootstrap is a web Design and Development service provider. Our Service: WordPress Theme Development | PSD to WordPress | Dropshipping Store Create | Shopify Store Create | Wp Error Fix | Contact Form | Landing Page Create | Bootstrap Landing Page .