How to Completely Customize the WordPress Login Page

The WordPress login page provides a generic looking one-size-fits-all solution for logging into WordPress. The only problem is customizing it can get a little awkward.

Unfortunately, WordPress doesn’t come with any built-in options for adding your own logo or changing the overall look and feel to match whatever custom theme or branding you have on your site.

This tutorial will show you the basics of how the WordPress login system works and how to customize it to look exactly the way you want it to. We’re going to create a WPMU DEV-inspired login form with a few simple modifications using PHP and CSS. If you’re just looking for a fast easy way to safely edit your login page, download Ultimate Branding.

Ultimate Branding enables you to quickly rebrand the front and backend of WordPress without code. With Ultimate Branding, you can customize your login screen, change colors, logos, and remove or replace WordPress branding. If you’re a WPMU DEV member, you can get started with Ultimate Branding right now. Not a member? Start a free trial and you’ll also get access to our 24/7 support for any WordPress issue, unlimited updates and our Hub security and site optimization services.

Okay, let’s get on with customizing your login page.

What We’ll Be Creating

Before we get started, here’s a look at the finished product:

Our customized login page.

We’ll be making modifications to the functions.php file in this tutorial so you can see how the changes work, step-by-step. However, it’s WordPress best practice to create a plugin and add any potential modifications there rather than hack the functions.php file.

Otherwise, if you do decide to use any of the code in this article and add it to your functions.php file, keep in mind that you will lose any changes to your site next time you update WordPress.

Customizing the WordPress Login Page

This tutorial will cover several modifications to theme files that will allow you to create your own personalized login page:

Add a custom background

Replace the WordPress logo with a custom logo

Customize the look of the login form

Change the login logo URL

Remove the lost password link

Remove the “Back to” link

Hide the login error message

Remove the login page shake

Change the redirect URL

Set “Remember Me” to checked

The login page isn’t part of the WordPress theme setup and if you’ve ever tried to customize the login page you would have discovered that WordPress doesn’t load your theme’s stylesheet. But that’s okay because we can create our own.

Here’s what you need to do:

In your current theme’s folder, create a new folder called “login”

In the /login folder, create a new .txt file and name it custom-login-styles.css

Next, we’ll need to tell WordPress to load this CSS file, so open up your theme’s functions.php file and add the following code:

Now let’s get started.

Add a Custom Background

For our WPMU DEV-inspired login page, we’re going to use the racing car image from our homepage (if you can’t remember what it looks like, logout and check out our homepage).

We can achieve this by adding the following to our custom-login-styles.css file:

Make sure you replace the file name in line 2 with the name of your own image file.

Replace the WordPress Logo With a Custom Logo

The WordPress Codex provides a tidy explanation for how to replace the logo, but since we’ve already created a CSS file we can just add the following to that file:

Save the logo you want to use in your /login folder where your custom-login-styles.css file is also stored.

Don’t forget to replace the file name in line 2 with the name of your own logo file.

Customize the Look of the Login Form

Now we’re going to play with the look of the login form so it better matches the WPMU DEV branding, but you can change the CSS however you like to match the look and feel of your own site.

First, we’ll style the labels to make the text darker, and the form input boxes to give them a more rounded look:

Next, we’ll style the button to make it a lighter shade of blue:

While the changes are subtle, they better match the WPMU DEV branding.

Change the Login Logo URL

By default, the logo links to wordpress.org. You can change this to point to your own site by adding this code to your functions.php file:

Replace “Your Site Name and Info” in line 7 with the name of your site. This is simply ALT text for the logo.

Remove the Lost Password Link

The “Lost Your Password?” link is helpful if you’ve lost your password, but if someone has hacked your email they will be able to get hold of your WordPress password and take over your site.

To remove the link, add this to your CSS file:

Remove the “Back to” Link

The “Back to…” link lets users return to the homepage of your site. I’m going for a clean look and don’t want to display the text under my form. To remove it, add the following to your CSS file:

Hide the Login Error Message

When you enter an incorrect username or password, the login page returns an error message telling you which details you got wrong. If your username is correct but password is wrong, it will say your password was wrong. If you typed the wrong username, it says “Invalid Username.” While the message may be helpful for you, the problem is that hackers can use this information to guess your login credentials and gain access to your website.

The easiest way around this is to change the error message with this code in your functions.php file:

Simply update line 3 to change the error message.

Remove the Login Page Shake

When you enter an incorrect username or password, the login form shakes to alert the user they need to try again.

I don’t really mind this feature, but some people find it annoying. To remove the shake, add this snippet to your functions.php file:

Change the Redirect URL

When you login to WordPress you’re immediately taken to the dashboard. You can easily change this to redirect users to your homepage instead.

Add the following code to your functions.php file so that all users other than admin are automatically redirected:

Set “Remember Me” To Checked

The “Remember Me” checkbox is unchecked by default. I like to check this when I login, but sometimes I forget, only to realize afterwards that I forgot and it’s too late. Doh!

To leave this box always checked, add this snippet to functions.php:

Wrapping Up

So there you go. With a few simple modifications you can easily personalize you login page to match the look and feel of your site.

Many theme designers don’t bother styling the login page because it’s not all that necessary, especially when it’s not part of the WordPress theme setup. But when you’re creating a site for a client, neglecting to style – and more importantly brand – the login page is a lost opportunity that breaks the user’s experience when you have a custom theme in place.

If you have users regularly logging into your site, customizing your login page is worth the time and effort. It’s another opportunity to brand your site and also leaves a lasting impression on your users.

Have you customized your login page? Show us what you’ve done in the comments below.

I would like to suggest to use a standard prefix for all code in your tutorials. Using a prefix of “my_” is a bit silly I think and you’re not doing it consequent at all as some functions don’t have a prefix at all. Not prefixing your code is prone to conflicts and so unnecessary.

You could prefix with your own name rw_ for Raelene Wilson or simple wpmudev_

Cool article… However can you tell me how to change the background of the that holds all of the content on the page. Also, how do I make the logo bigger. Here’s what I have so far.http://www.harbor-ucla.com/v2/wp-login.php

What a great post. I created a beautiful wp-login.php page. But can anyone help me setup this page as the default frontend startpage? I have a intranet website for users with the default startpage like this: //localhost/wordpress

I would like to have it as follow:
Start/login page: //localhost/wordpress/wp-login.php
After succesfull login: //localhost/wordpress
After logout: //localhost/wordpress/wp-login.php

Or should I create a wordpress page exactly like wp-login.php en set this one as default frontpage? And how can I do this so it wil exactly look and feel like wp-login.php

I do not think you can force the network login page as the main landing page with this plugin, but it does allow you to select any other page, post or custom post type as the landing page. Very quick way to change what visitors encounter on the home page and it works flawlessly. Just remember that the page or post you select as the landing page will no longer appear in the admin list of posts or pages until you DESELECT it as the home page:

I’m trying to take the “Hide Login Errors” tip one step further. When an attempt is made to login with a valid username and incorrect password, the username is still pre-populated into the username field upon display of error messages. It is not pre-populated when a non-valid username is attempted. Because of this, valid usernames are still effectively exposed to potential attackers.

I’ve located the code within wp-login.php that is responsible for this behavior (line 869):

This way, the attempted username would be output to the username field regardless of whether it was a valid one or not. Do you have any suggestions how I could make this adjustment, short of just changing the code in wp-login.php (which would just get overwritten on updates, as you know)?

On the following page, I am struggling to add Numbers beside the default text. For eg. I wanted

1. Billing Address
2. Shipping Address
3. Review & Payment

on – http://www.shop.memoriesunltd.com/checkout/ page. Since this page is on testing mode, few of my friends told me they are getting confused which steps to follow, if they are viewing this page on smart phone platform.

One thing I cannot seem to figure out… When the user enters the wrong information and submits, they are taken to a completely new page (not styled like this cool one I’ve created) with the error message being displayed. Is there a way to style/manage that page as well, or to redirect them back to this new login page I’ve created with all this great styling?

Hi, it’s a good article but I have one question.
If we want to force a Custom login page to all site in WPMU. It isn’t the best solution if we modify in each theme in WPMU. Do you have something to suggest for this case?