If you are looking for detailed instructions on how to create a custom WordPress login screen with your own logo and color scheme, then you are in the right place.
Customizing your website’s login screen can give your website a more professional appearance.
You can remove the WordPress logo and replace it with your own, you can apply your own color scheme, and more!
So view our video to learn how to customize YOUR WordPress login screen!
Below is the code needed to create your custom functions.php file.
Simply open Notepad, and then click File > Save As.
Name Your new Notepad file functions.php ; and next to “Save as type”, make sure to click the dropdown box and change the option to “All Files”.
You may then copy and paste the following code into the document, customizing it as necessary, and then upload it to your child theme folder when ready.
Then you will have your custom WordPress login screen!
Enjoy!
<?php
// enqueue the child theme stylesheet
Function wp_schools_enqueue_scripts() {
wp_register_style( ‘childstyle’, get_stylesheet_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘childstyle’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wp_schools_enqueue_scripts’, 11 );
/**
*YOUR WEBSITE NAME Custom Functions File
*
* Always use child theme if you want to make some custom modifications.
* This way theme updates will be a lot easier.
*/// Load Custom Login Logo
add_action(“login_head”, “my_login_head”);
function my_login_head() {
echo ”
<style>
body.login #login h1 a {
background: url(‘WEBSITE LOGO URL’) no-repeat scroll center top transparent;
background-size: 150px 150px;
width: 150px;
height: 150px;
}
.login .message {
border-left: 8px solid #000066;
border-right: 8px solid #000066;
}
.wp-core-ui .button-primary {
background: none repeat scroll 0 0 #000066;
border-color: #000066;
color: #fff;
}
.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover {
background: none repeat scroll 0 0 #040479;
border-color: #000066;
box-shadow: 0 1px 0 rgba(120, 200, 230, 0.6) inset;
color: #fff;
}</style>
“;
}// Custom Login URL
function my_login_logo_url() {
return get_bloginfo( ‘url’ );
}
add_filter( ‘login_headerurl’, ‘my_login_logo_url’, 10 );function my_login_logo_url_title() {
return ‘YOUR WEBSITE NAME’;
}
add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );
