How to Completely Customize the WordPress Login Page
The WordPress login page isn’t very welcoming, is it? It’s more like a boring door in an alley than spectacular pearly gates. But how you initiate users into the secret part of your site matters, especially if you have something special in there.
The portal through which people enter your world helps build anticipation and primes their peepers for what is inside. Branding your WordPress sign-in page can help you elevate your protected content and WordPress admin dashboard, telling your visitor, this is no ordinary WordPress site.
In this post, I’m going to show you what goes into building a custom WordPress login page. I’ll then show you how to make the changes using the appropriate CSS and/or PHP code, for those of you who want full control or only want to change one little thing.
Then, we’ll cover how to make changes with Branda, (formerly the Ultimate Branding plugin), which will allow you to completely customize the look of your login form, quickly and without touching any code. We also have a quick video that shows you exactly how to set up Branda, so stay tuned for that or skip ahead.
How to customize the different login page elements with CSS and PHP:
- How to Add Custom CSS to Your Login Page
- WordPress Login Elements CSS Selectors
- A Crash Course in CSS
- How to Change Your Admin Login Page with PHP
How to customize the different login page elements using Branda:
- Logo on the Login Screen
- Login Page Background
- Login Form
- Remember Me Checkbox
- Error Message
- Links Below the WordPress Login Form
- Login Redirect
WordPress Login Page Customize
The WordPress login page is just like any other page on your WordPress site:
- You can change the styling and colors by editing the element with CSS
- You can change the functionality or add, subtract, and move elements by changing the layout using hooks and filters in PHP.
How to Add Custom CSS to Your WordPress Login Page
Your WordPress sign-in page doesn’t use the stylesheet that is included with your theme. This means that if you try to add CSS to customize the login page to your styles.css file in your theme folder, the changes will not appear. You’ll need to add your custom CSS styles to the head of your login page with PHP.
If you have just a few lines of CSS, you can create a custom function, and use the
login_enqueue_scripts hook to insert CSS into the head of the login page.
In the example above, I want to remove the Back to link under the login form. I’m only changing one thing, but you can customize multiple elements in between the
To get this custom CSS to load, I added my custom function with all my custom CSS to the login page using
login_enqueue_scripts. You would add all the code above to your functions.php file, just exclude the opening
This is a simple way to add a couple of styles. If you want to make a lot of changes, then I suggest you create an additional stylesheet in your theme files so it’ll be easier to manage.
To add a custom stylesheet to the head of your login page, instead of using
<style> tags in your function, you’ll use
wp_enqueue_style instead to load the stylesheet.
In the example above, the custom CSS file in my theme where I’ll be adding the customizations for my login page is called
style-login.css. I’ll add my CSS to
style-login.css and add the code above to my functions file to load it.
WordPress Login Page Elements
So here is what the default WordPress login page looks like for reference:
To customize each element with CSS, you’ll need to be able to target it by using its selector. In other words, you need to know its name.
Here are some specific selectors for the login page and what they control:
|body.login||The page background|
|body.login div#login h1 a||The WordPress logo|
|body.login div#login form#loginform||The white box that contains the form|
|body.login div#login form#loginform p label||The username and password field labels|
|body.login div#login form#loginform input||Both input fields (username and password)|
|body.login div#login form#loginform input#user_login||Just the username input field|
|body.login div#login form#loginform input#user_pass||Just the password input field|
|body.login div#login form#loginform p.forgetmenot||The Remember Me field|
|body.login div#login form#loginform p.submit input#wp-submit||The Submit button|
|body.login div#login p#nav a||The Lost Your Password link|
|body.login div#login p#backtoblog a||The Back to link|
A Crash Course in CSS
Okay, have you found the element you want to target? Good. If you’re familiar with CSS, you know where to go from here, so you can hop over this section. Everyone else, follow me. Here’s how to customize the elements with CSS. If you get stuck, leave us a comment. If you get frustrated and want an easy solution, give Branda a try.
How to Remove an Element
To hide an element, such as the Back to link as we did earlier, you can use
Here’s how to hide the lost password link, for example.
How to Change the Background
To change the background color of an element, such as the page background or button background, you’ll use
background-color:#222222; and substitute
#222222 with your color of choice. In the example below, I used
#17a8e3 which is a lighter blue.
I also use
!important in order to override the default color. If you’re using a very specific selector, you won’t have to use
!important. But in some cases, if your custom CSS isn’t working, you may have to add it.
If you want to add a background image, you’ll use
background-image: url('login-logo.png'); and replace
login-logo.pnp with your image file URL. Make sure you add the background file to the same directory as your stylesheet. If you use the media library uploader, it won’t work.
In the example below, you’ll see that I changed the soft grey background of the login page to an image
To change the WordPress login logo, you’ll use the following:
How to Add Space Around an Element
When adding space to an element, you need to specify if you want the space to be on the inside (padding) or outside (margin) of the element.
Think of the submit button. If you want to create more space inside the button, so the text inside has room to breathe and isn’t so close to the edges, you’ll need to increase the padding
padding:10px 10px 10px 10px;. If you want to create room outside the button so other elements aren’t so close, you’ll increase the margin
margin:10px 10px 10px 10px;
Padding and margin have four values. One for the top, one for the right, one for the bottom and one for the left side, in that order.
For example, for an element with
padding: 10px 20px 30px 40px:
- The top padding will be 10px.
- The right side will have a padding of 20px.
- The bottom will have a padding of 30px.
- And the left side will have a padding of 40px.
Margin works the same way.
How to Change the Font Size and Color
Change the font size of your paragraph text, links or form fields with
font-size: 16px;. Just replace
16px with the size you want. You can change the text color with
color:#222222;, just replace the
Also, note that you can add multiple styles to one element.
How to Change the Border
Border is a three-part style
border: 2px solid #222222;. You’ll specify the width of the border first, then the style (solid, dashed, etc.) and finish up by specifying the color
Here’s an example with multiple styles.
How to Change Your Admin Login Page with PHP
To change the functionality of your WordPress login page, you’re going to have to use PHP. You’ll add these functions to your
Change the Login Error Message
Besides branding your error message, modifying the error message can help improve the safety of your site. If you enter an incorrect password or username, WordPress will return a very specific error message to let you know what you did wrong. This helps users, but it also helps hackers.
You can use this function to override the default error message:
You can customize the message by changing the ‘Incorrect login details’ message that is in quotes. Leave the quotes though.
Change the Redirect URL
When your user logins in, you can direct them back to the frontend instead of the dashboard, which is what happens by default.
To redirect the user to the home page, add the following to your functions.php file:
Set Remember Me To Checked
The Remember Me checkbox is unchecked by default, but if you have forgetful users who don’t check it, you can enable it automatically.
To leave this box always checked, add this snippet to
As you can see, when it comes to giving you ultimate control over the style of your page, CSS is where it’s at. But, if you want to modify the layout or rename items, it becomes much more difficult because you have to use PHP. This is where Branda can help you tremendously. Let’s go over how to change your login page using Branda.
How to Use Branda to Customize the WordPress Website Login Page
Branda can help you do more than simple customizations. Check out this video on how to use Branda to completely overhaul the WordPress login page. You’ll see Micah go through each step so you’ll get a good overview and know exactly what to do. Then I’ll show you all the different options in detail below.
First, you’ll need to install the Branda plugin on your site. Then, you need to activate the Customize Login Screen module from the Branda dashboard.
The Customize Login Screen module is divided into 6 sections
- Template – allows you to change the layout of the login page
- Content – this is where you can show/hide elements or change the wording or upload custom images
- Design – change the margins, borders, opacity, basically the styling of different elements
- Colors – change the color of any element here
- Redirection – set where you want the visitor to be directed to when they log in or out
- Custom CSS – add your own code or modify the code Branda generates as you build your custom login form. Why not use the CSS you just learned?
Let me teach you how to make some common customizations using Branda. Here’s how to customize the following:
- WordPress Change Logo
- Login Page Background
- Login Form
- Remember Me Checkbox
- Error Message
- Links Below the WordPress Login Form
- Login Redirect
Change the WordPress Login Logo
In Branda, to change the WordPress login logo and insert your own, go to the Content section and open the Logo and Background dropdown. From there you can upload an image or enter a URL if your image is hosted elsewhere. You can also remove the logo altogether if you’re going for a minimal look.
If you’d like to really push your logo into a more unique shape, go to the Design section in Branda and open the Logo dropdown. From there you can adjust to the width of the logo container to accommodate a wider logo. You can also change the position, opacity, corner radius, and the margins of the logo.
Customizing the WordPress Website Login Page Background
In Branda, you can change the soft grey background to a color of your choice. To change the color, go to the Colors section and open the Background dropdown.
To use an image, you’ll go to the Content section, then open Logo and Background. From there you can upload a new image. Branda also gives you the option to upload multiple images and create a slideshow or show a random image each time. To use multiple images, scroll down to Design, and open Background to configure.
Customizing the WordPress Login Form
Want to know how to create a client login in WordPress? Rename your field labels! In Branda, go to Content > Form to rename the input fields for username and password on your custom login form. You can use client ID, member number, or superhero name, whatever!
You can customize the look of the form using Branda. Go to Design > Form to edit the margin, padding, border, corner radius, and the shadow. You can also modify the button in the same place. Adjust the button border radius or adjust the button shadows.
To edit the colors of your form, such as text colors, border colors, etc., you’ll go to Colors > Forms
Modifying the Remember Me Checkbox on the WordPress Login Screen
Branda makes it easy to automatically check or hide the Remember Me checkbox in the login form. Go to the Content section and open the Form section. There, you’ll be able to show or hide the Remember Me box. If you choose to show it, then you can automatically mark the checkbox as well.
Customize WordPress Website Login Page Error Message
Ah, there’s nothing like an error message to make you feel like you don’t know what you’re doing.
Luckily Branda can help you soften your error messages up or make them more helpful. In Branda, go to Content > Error Message to modify. You can use HTML within the message for added clarity or emphasis.
To change the styling of your message, you can modify the opacity of the container by going to Design > Error Message. To change the colors of your error messages, go to Colors > Error Message.
Customizing the Links Below the WordPress Login Form
You can adjust the color of the links below the login form with Branda by going to Colors > Links Below Form
Customizing the WordPress Login Redirect
In Branda, you can change where the login form will redirect the user to in the Redirect section.
As you can see, there’s more than one way to skin a login page. Customizing your site login is an easy way to delight your users and make a statement. If you want to change a couple of things and are comfortable with PHP and CSS, then you can edit your files directly. But if you really want to go all out, Branda can help you take your login page to the next level.
But why stop there, WPMU DEV gives you what you need to white label all the things! It’s an especially nice touch for bespoke sites.
If you’d like to give Branda a try and see what we’ve added since we overhauled Ultimate Branding, you can download the plugin for free. You’re gonna love her. She’s gonna be your new best friend.Tags: