Customizing the Default WordPress Login Form or login page

In this article, we will learn how to customize the default WordPress login page.

• Change the login logout redirection page.
• Change the Logo URL.
• Change Default Logo.
• Change Default Design.

Set Custom Login Page. 

Here we will set the URL after login where we want to redirect.
I find some plugin on WordPress reposetry but it's not a good idea.

"Redirect after login without any plugin"

Customizing the WordPress Login ---

This function redirect on custom login page default login page replaced.

 
add_action('login_redirect','login_redirect_fun');
function login_redirect_fun(){
	 wp_redirect( home_url('/custom_login_page/') ); //Add your page url
        exit;
}

This function redirect on contact us page after Logout.

add_action('wp_logout','logout_redirect');

function logout_redirect(){
    wp_redirect( home_url('/contact-us/') ); //You can change url 
        exit;
}    

This function this function rplace your default wordpress logo and URL.

function my_login_logo_url() {
    return home_url(); //here you can add any url
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

Here we can add our logo and bacgkgroud image and font color etc.

Note: copy all code and past in functions.php file.

function my_login_logo() { ?>
    <style type="text/css">
     	//Your logo image here 
	 div#login h1 a {
    background-image: url(https://cdn.pixabay.com/photo/2016/11/18/11/17/youtube-1834016_960_720.png);
}
//page background image 	
	.login{
		background-image: url("https://cdn.pixabay.com/photo/2013/05/09/09/06/waves-circles-109964_960_720.jpg");
		color: #ffff;
    background-repeat: no-repeat;
    background-size: cover;
	}
	form#loginform {
    background-color: #00000030;
		}
		.login #backtoblog a, .login #nav a {
			text-decoration: none;
			color: #ffffff !important;
		}
		.login #login_error {
			border-left-color: #d63638;
			color: #f50000;
		}
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

logo -