Design a Stylized Custom WordPress Login Screen

This guide shows you how to dramatically customize your WordPress login screen with a few simple steps, using custom CSS and a small PHP function. We'll go beyond a simple logo change and create a fully branded login experience.

(Click to see the full version)

Download the background image used in this tutorial here:

This tutorial is broken down into sections, allowing you to customize only the aspects you need. Whether you want subtle tweaks or a complete overhaul, this guide has you covered.

Step 1: Modify functions.php

First, you need to add code to your theme's functions.php file to tell WordPress to use a custom stylesheet for the login screen. Paste the following code into your functions.php file:

function stylized_login() {
  echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/stylized-login.css"></link>';
}
add_action('login_head', 'stylized_login');

This code hooks into the login_head action and includes your stylized-login.css file. Ensure both the function and the add_action are included. The path to your CSS file is relative to your theme's directory. Adjust if necessary.

Step 2: Create stylized-login.css

Create a file named stylized-login.css in your theme's directory (the same folder as your style.css). This is where you'll add all your custom CSS.

Step 3: Customize Your Login Screen (CSS)

Now, let's add the CSS to your stylized-login.css file. The following code provides a comprehensive customization, but you can selectively use only the parts you need.

/* Logo above login form */
.login h1 a {
  background-image: url('logo.png'); /* Replace 'logo.png' with your logo */
}

/* Background image */
body.login {
  background-image: url('bg.png'); /* Replace 'bg.png' with your background image */
}

/* Background of form */
.login form {
  background: rgba(0, 0, 0, .6); /* Adjust transparency as needed */
}

/* Border for the form */
#loginform {
  border-color: #33d42a; /* Change border color */
}

/* Labels for the form */
.login label {
  font-family: "Courier New", Courier, monospace;
  font-size: 28px;
  color: #33d42a; /* Change label color */
}

/* Username text box */
.login input[type="text"] {
  font-family: "Courier New", Courier, monospace;
  font-size: 24px;
  background-color: rgba(0, 0, 0, .6); /* Adjust transparency */
  border-color: #33d42a; /* Change border color */
}

/* Password text box */
.login input[type="password"] {
  background-color: rgba(0, 0, 0, .6); /* Adjust transparency */
  border-color: #33d42a; /* Change border color */
}

/* Login button */
.wp-core-ui .button-primary {
  background-color: #000;
  background-image: none;
  border-color: #33d42a;
  border-bottom-color: #13f278;
  color: #33d42a; /* Change button text color */
}

/* Login button hover */
.wp-core-ui .button-primary:hover {
  background-color: #33d42a;
  background-image: none;
  border-color: #33d42a;
  color: #000; /* Change hover text color */
}

/* Lost password and 'Back to' links */
.login #nav a, .login #backtoblog a {
  color: #33d42a !important;
  text-shadow: none;
}

/* Lost password and 'Back to' hover links */
.login #nav a:hover, .login #backtoblog a:hover {
  color: #33d42a !important;
  text-shadow: 0 1px 0 #33d42a;
}

Remember to replace placeholders like 'logo.png' and 'bg.png' with the actual filenames of your images. Your logo should ideally be 247x63 pixels for optimal fit.

Step 4: Change the Logo Link (Optional)

To change the link associated with the logo, add this to your functions.php file:

function stylized_login() {
  echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/stylized-login.css"></link>';
}
add_action('login_head', 'stylized_login');

This redirects the logo click to your site's home page.

After making these changes, clear your browser cache and test your customized login screen. Remember to always back up your website before making any code changes.

The above is the detailed content of Design a Stylized Custom WordPress Login Screen. For more information, please follow other related articles on the PHP Chinese website!