| Quick Answer:
You can customize your WordPress login page by adding a custom stylesheet via the login_enqueue_scripts hook, swapping the logo and its link with the login_headerurl filter, and restyling the form and background with targeted CSS. While you’re in there, also change the login URL away from the default /wp-login.php, since that default is the first thing bots probe on every WordPress site. |
If WordPress allows you to customize almost any feature, to tailor-make a website according to your detailed preferences, why leave the login page be. The login page provided by default, is definitely disconnected from the rest of your site. So how about revamping it up a bit? This tutorial will provide you a basic guide to change the logo on the login page, the background color, and tweak the login form styling a bit.
For the changes, you would have to add some code in your theme’s (or child theme’s) functions.php file, and add the styling in a custom stylesheet. So let’s continue.
Adding a Custom Stylesheet
WordPress does not load default styling for the login page. So we need to create a custom stylesheet. To customize the login page, you need to override certain classes in your custom stylesheet. Let’s create a stylesheet, ‘custom-login-style.css’ and save it in the current theme folder. To ensure that the stylesheet is picked up, add the following code in the functions.php of your theme:
[pre]function my_login_stylesheet() {
wp_enqueue_style( ‘custom-login-style’, get_stylesheet_directory_uri() . ‘/custom-login-style.css’ );
}
add_action( ‘login_enqueue_scripts’, ‘my_login_stylesheet’ );[/pre]
Changing the Login Logo
If your entire site features your business logo, why should the login page be any different. The logo is displayed as a background image on the login page, for a link ‘a’ tag inside the heading ‘h1’ tag. To change the logo just add the following in custom-login-style.css
[pre].login h1 a
{
background-image: url(‘../images/customlogo.png’);
background-size: 100px 80px;
width: 100px;
height: 80px;
}[/pre]
where ‘customlogo.png’, is a logo of your site, and is uploaded in the images folder of your current theme. The dimensions set should be as per your site’s logo. You can adjust additional properties such as padding, margin, overflow, etc.
Now, the logo is also a link (by default to wordpress.org). To change the logo link, add the following in functions.php
[pre]function my_login_logo_url() {
return home_url();
}
add_filter( ‘login_headerurl’, ‘my_login_logo_url’ );
function my_login_logo_url_title() {
return ‘Site Name’;
}
add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );[/pre]
Customizing the Login Form
The login form fields and background can also be styled by overriding some of the css classes. To change the login form, you can use the following:
[pre].login form {
border: 2px solid #960000;
background: #f8f8f8;
box-shadow: 10px 10px 5px #e1e1e1;
overflow: hidden;
}[/pre]
The form fields text can be customized using ‘label’ class. To change the login button, you would have to override the ‘button-primary’ class. Login page customization is often part of a broader custom WordPress website design strategy to maintain brand consistency across user touchpoints.
Adding a Custom Background
Now the background color is, let’s face it, boring. So how about changing it too? And besides, this is probably the easiest to change, on your login page. Just override the ‘login’ class’ background property.
[pre].login
{
background-color: #ffffff;
}[/pre]
Bonus Tip! Changing the url from wp-login to login
So you have changes most of the things, why leave out the url? To change the login url from yoursite.com/wp-login to yoursite.com/login/, use a plugin, Better WP Security to help you.
If you’re looking to fully tailor your WordPress site’s experience—front and back—we can help.
Explore our WordPress website development services
That’s all for this article. Most web designers would not bother customizing the WordPress login page, but we feel it is important to style it, to maintain a continuity with the rest of the theme. What are some tips you have used to customize your login page? Are there any you would like to share with us?
Further Reading:
Frequently Asked Questions
Does changing my login URL actually improve security, or is it just obscurity?
It’s a form of security through obscurity, which isn’t a complete defense on its own, but it does stop the vast majority of automated bots that only ever probe the default /wp-login.php path. Pair it with brute-force protection and strong passwords for real protection, not as a replacement for them.
Will customizing my login page break after a WordPress update?
Not if you follow the hook-based approach (login_enqueue_scripts, login_headerurl) instead of editing WordPress core files directly. Hooks are designed to survive core updates; direct core edits are not.
Can I customize the login page without any coding knowledge?
Yes, several plugins offer drag-and-drop login page customization if you’d rather avoid touching CSS or functions.php directly. The trade-off is less granular control than a coded approach.
Is a custom login page enough to stop brute-force attacks?
No, visual customization and security are separate concerns. Changing the URL and appearance helps, but real protection also needs login attempt limiting, strong password policies, and ideally two-factor authentication.
Where should I put my custom login CSS so it doesn’t get overwritten?
Keep it in its own file, custom-login-style.css, registered through functions.php, rather than editing your theme’s main stylesheet. This keeps it intact even if you switch themes later.
