thegoldeneye
Power Member
- Oct 26, 2015
- 544
- 518
After making a tutorial "How to Make Your Own WordPress Theme for Free" and seeing you liked it, now it's time for a new one related to WordPress.
I always wanted to change that default look of the WordPress login page, but everything you can find on the Google/YouTube is how to change styling with plugin easily. It's just a few steps, install the plugin, activate, add a logo, and change colors.
It's easy, I agree, but... It's one more unnecessary plugin installed on the site, and you know what we are going to get with, let's say 10+ installed plugins? Slow site!
We don't want a slow site, not for our clients nor us, especially not for the clients.
So, I will show you can easily to change this:
To something like this:
So let's get started!
STEP ONE:
We need to create a new folder in your theme directory. If you are using a child theme, you will need it there. But I am using my theme, so path is: /wp-content/themes/themename/
And I will create here folder "loginpage". You can call it whatever you like.
Upload your logo in that folder and create a new CSS file, I will call it "my_loginpage.css".
STEP TWO:
Customize everything you want there, but I will copy/paste my CSS here so you can easily change it.
STEP THREE:
We need to make some changes to functions.php. We need to change the logo URL - we want to redirect it to our homepage instead of wordpress.org. Also, we need to tell the WordPress, "hey, I want to include my new CSS file so I can see the changes."
Save and upload. You are done.
Imagine a client login to their website and see a customized login page with their brand colors and logo.
I hope you will like this tutorial, and also I hope it will be helpful. If you have any questions, feel free.
I always wanted to change that default look of the WordPress login page, but everything you can find on the Google/YouTube is how to change styling with plugin easily. It's just a few steps, install the plugin, activate, add a logo, and change colors.
It's easy, I agree, but... It's one more unnecessary plugin installed on the site, and you know what we are going to get with, let's say 10+ installed plugins? Slow site!
We don't want a slow site, not for our clients nor us, especially not for the clients.
So, I will show you can easily to change this:
To something like this:
So let's get started!
STEP ONE:
We need to create a new folder in your theme directory. If you are using a child theme, you will need it there. But I am using my theme, so path is: /wp-content/themes/themename/
And I will create here folder "loginpage". You can call it whatever you like.
Upload your logo in that folder and create a new CSS file, I will call it "my_loginpage.css".
STEP TWO:
Customize everything you want there, but I will copy/paste my CSS here so you can easily change it.
CSS:
/* Background */
body {
background: #0B1B51!important;
font-family: Arial,Verdana,sans-serif;
}
/* Logo */
.login h1 a {
background-image: url(white-01.svg)!important;
width: 213px;
height: 97px;
background-size: 213px 97px;
}
/* Form */
#login {
width: 450px;
}
.login label {
color: #454545;
display: block;
margin-bottom: 1em;
font-weight: bold;
}
.login form .input {
font-weight: normal;
}
.login #backtoblog a, .login #nav a {
color: #fff;
}
/* Button Colors */
.wp-core-ui .button-primary {
background: #ffb81c;
border: none!important;
border-radius: 0px;
padding: 5px 25px !important;
}
.wp-core-ui .button-primary:hover {
background-color: #cc9417!important;
}
/* Center links */
#login #nav,
.login #backtoblog {
text-align: center;
}STEP THREE:
We need to make some changes to functions.php. We need to change the logo URL - we want to redirect it to our homepage instead of wordpress.org. Also, we need to tell the WordPress, "hey, I want to include my new CSS file so I can see the changes."
PHP:
/* Customize Login Page */
function change_login_logo() {
$logo_style = '<style type="text/css">';
$logo_style .= 'h1 a {background-image: url(' . get_template_directory_uri() . '/loginpage/white-01.svg) !important;}';
$logo_style .= '</style>';
echo $logo_style;
}
add_action('login_head', 'change_login_logo');
function change_login_url() {
return 'YOUR_URL';
}
add_filter('login_url', 'change_login_url');
function my_login_css() {
wp_enqueue_style('login-styles', get_template_directory_uri() . '/loginpage/my_loginpage.css');
}
add_action('login_enqueue_scripts', 'my_login_css');Save and upload. You are done.
Imagine a client login to their website and see a customized login page with their brand colors and logo.
I hope you will like this tutorial, and also I hope it will be helpful. If you have any questions, feel free.
