Skip to main content

How to Theme a WordPress Login Page Without a Plugin

January 6th, 2016

Customizing the login page for a WordPress site is a great thing to do on any client project. It’s one step that, although relatively minor, adds an extra touch of professionalism. There are several plugins out there geared towards admin customization. If you’re not comfortable working within the code of your theme, I’d recommend going that route. Otherwise, here are the steps necessary to get a fully customized login page.

STEP #1: Create a CSS file with your login styles.

I tend to put this in a CSS folder within my existing theme so something like theme-name/css/login.css. Here are the styles I typically start out with:

.login {
  background-image: linear-gradient(to right, #2c2d60 0%, #05142d 100%);
}

#login h1 a {
  background: url('../images/logomark.png') center 0 no-repeat;
  width: 51px;
  height: 40px;
  background-size: 51px 40px; 
}

.login .message {
  background-color: #424242;
  color: #fff;
  border-color: #6772e5;
  text-align: center; 
}

.login input[type=text]:focus,
.login input[type=password]:focus {
  border-color: #6772e5;
  box-shadow: none;
}

.login label {
  color: #fff;
}

.login #backtoblog {
  text-align: center; 
}

.login #backtoblog a:link,
.login #backtoblog a:hover, 
.login #backtoblog a:active {
  color: #fff;
  text-shadow: none; 
}

#loginform {
  background: none;
  border: 0;
  box-shadow: none; 
}

.login #nav {
  display: none; 
}

#loginform .button-primary {
  background-color: #6772e5;
  background-image: none;
  border-color: #6772e5;
  -webkit-box-shadow: none; 
  box-shadow: none;
  text-shadow: none;
}

You can change the background color of the login page by adjusting the hexadecimal value for body.login. #login h1 a is where your logo file would go (note: in this example my logo file is in an images folder within my theme), including the height and width values. You can have background-size be auto, as well, but because the default WordPress login page style has a background-size attribute, you do need to declare values here to override it.

.login .message is some styling for the messages displayed like the log out successfully message. You can change these values to match your theme coloring. You’ll also perhaps want to adjust the .button-primary coloring, which is the Login button coloring, to match your theme.

Once your stylesheet is ready to go, onto step #2.

STEP #2: Add function to call custom stylesheet on login page.

In the functions.php file of your custom theme, add the following function somewhere between the opening and closing tags:

function sitename_enqueue_login_style() {
  wp_enqueue_style( 'sitename-options-style', get_template_directory_uri() . '/css/login.css' );
}
add_action( 'login_enqueue_scripts', 'sitename_enqueue_login_style' );

Replace the 3 instances of SITENAME with your site identifier if you want to follow this structure. Like on mine, it would likely be kfalkner_enqueue_login_style.

Note: If your login CSS file is located in a different location besides the CSS folder within your theme, you will need to adjust the location accordingly.

STEP #3: Enjoy your new custom WordPress login page!

That’s it. That’s really all there is to it. You can continue tweaking the styling as needed. If you’re interested in another little touch you can add to the backend of your projects, you can see my blog post on adding a credit tag within the WordPress admin.

MORE: WordPress Tutorials

Related Articles