How to Completely Customize the WordPress Login Page

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.

Content

How to customize the different login page elements with CSS and PHP:

How to customize the different login page elements using Branda:

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 <style> tags.

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 <?php.

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:

Screenshot of default WordPress login page
No frills, no thrills

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:

Selector Modifies
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 display:none;

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 home-bg.jpg

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 #222222.

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 functions.php file.

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 functions.php:

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.

Screenshot of Branda Dashboard
Click the pencil icon to activate the Customize Login Page module

The Customize Login Screen module is divided into 6 sections

  1. Template – allows you to change the layout of the login page
  2. Content – this is where you can show/hide elements or change the wording or upload custom images
  3. Design – change the margins, borders, opacity, basically the styling of different elements
  4. Colors – change the color of any element here
  5. Redirection – set where you want the visitor to be directed to when they log in or out
  6. 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:

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.

Screenshot of Branda Settings, Upload Image
Your logo should have a width of 320px. If you have a larger logo, see the section below.

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.

Screenshot of Branda Design Settings for Logo
Have a logo that is bigger or smaller than 320px? No problem, just adjust the container

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.

Screeshot of Branda Settings Change Background Color
Grey no more

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.

Screenshot of Branda Settings Upload Sign in Form Background
Make a big impact with a custom background image

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!

Screenshot of Branda settings, rename form fields
Brand your form fields

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.

Screenshot Branda Form Appearance Settings
Change the appearance of the form itself

To edit the colors of your form, such as text colors, border colors, etc., you’ll go to Colors > Forms

Screenshot Branda Login Form Colors
Note the tabs to modify the colors of Active, Focus and Hover states.

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.

Screenshot of Branda Remember Me Checkbox Settings
Until you’re in my arms again, Remember me

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.

Screenshot Branda Customize Error Messages
Pro tip, if you change the form fields names, change your error message to match

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.

Screenshot of Branda Change Error Message Colors
Note the tabs to modify the colors of Active, Focus and Hover states.

In Branda, you can choose to hide the links below your custom login form by going to Content > Links Below Form. You can hide the Register/Lost Password link, the Privacy Policy Link or the Back to Link.

Screenshot of Brand hide links on login page
You can’t hide from me

You can adjust the color of the links below the login form with Branda by going to Colors > Links Below Form

Screenshot of Branda Link Colors for Login Page
Color me link

Customizing the WordPress Login Redirect

In Branda, you can change where the login form will redirect the user to in the Redirect section.

Screenshot of Branda Login Form Redirection Options
Modify where the visitor will go to after logging in or logging out

That’s All

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 get yourself a free trial right here. You’re gonna love her. She’s gonna be your new best friend.

Tags:
Felicia Ceballos-Marroquin
Felicia Ceballos-Marroquin WPMU DEV rescued Felicia from cubicle hell and put her decade of WordPress expertise to good use, giving her the privilege of being a staff writer.
Have you tried branding your login page? What do you think of the new Branda plugin?