How to customize the WordPress login page?

You can customize the WordPress login page in two ways: use a plugin such as LoginPress or Custom Login Page Customizer to change the logo, background, colors, and form styles visually, or add a few lines of code to a custom plugin or your child theme's functions.php using hooks like login_enqueue_scripts, login_headerurl, and login_message. Both approaches let you replace the WordPress logo with your own and make the login screen match your brand.

The default login page at /wp-login.php works well, but it looks the same on every WordPress site. If you run a membership site, a client project, or a site with many contributors, a branded login screen feels more professional and trustworthy. This guide shows you how to customize the login page with a plugin, how to do it with code step by step, how to control where users go after logging in, and a few best practices to keep things secure.

Why Customize the WordPress Login Page?

A custom login page can help in several ways:

• Brand consistency: Your logo and colors make the login experience feel like part of your site, not a generic WordPress screen.
• Professional client sites: Agencies and freelancers often brand the login page for clients.
• Better user experience: You can add helpful messages, such as support contact details or instructions for new members.
• Clear redirects: You can send users to the right place after logging in, such as their account page instead of the dashboard.
• Reduced confusion: Users who don't know what WordPress is won't be puzzled by the WordPress logo linking to WordPress.org.

Method 1: Customize the Login Page With a Plugin

Plugins are the easiest way to customize the login page without code. Popular, well-maintained options include:

• LoginPress: A dedicated login page customizer with a live preview in the WordPress Customizer, templates, and options for logos, backgrounds, forms, buttons, and error messages.
• Custom Login Page Customizer: A lightweight plugin (often listed as "Colorlib Login Customizer") that also works through a live preview.
• Theme My Login: Replaces the default login, registration, and password reset screens with pages that use your theme's design.

Steps Using LoginPress

1. Install the plugin: Go to Plugins > Add New Plugin, search for "LoginPress," click Install Now, and then Activate.

2. Open the customizer: Go to LoginPress > Customizer. This opens a live preview of your login page.

3. Choose a theme or template: Pick a starting design from the available templates. Some templates may require the premium version.

4. Upload your logo: Open the Logo section, upload your logo, and adjust its width, height, and link URL.

5. Change the background: In the Background section, set a background color or upload an image. Keep it subtle so the form remains easy to read.

6. Style the form: Adjust the form background, width, padding, field styles, and button colors so they match your brand.

7. Customize messages: Change the text of error messages, the welcome message, and the "Lost your password?" link if needed.

8. Publish: Click Publish to save your changes, then log out and view the login page to test it.

A plugin is ideal if you want a quick result or need to hand the settings over to a client. The trade-off is one more plugin to keep updated.

Method 2: Customize the Login Page With Code

If you prefer not to add a plugin, WordPress provides hooks specifically for the login screen. Put the following snippets in a small custom plugin or in your child theme's functions.php. A custom plugin is often the better home, because the branding will stay in place even if you change themes.

Before editing any PHP file, take a backup and make sure you can access your site's files through SFTP or your hosting file manager. A typo in PHP can make the site, including the login page, inaccessible until you fix it.

Creating a Simple Custom Plugin

Create a folder called sajjad-login-branding in wp-content/plugins, and inside it a file named sajjad-login-branding.php:

<?php
/**
 * Plugin Name: Sajjad Login Branding
 * Description: Custom branding for the WordPress login page.
 * Version: 1.0.0
 * Author: Sajjad
 */

if ( ! defined( 'ABSPATH' ) ) {
exit;
}

Activate it under Plugins, then add the snippets below to the same file. Put your logo and CSS in the plugin folder, for example sajjad-login-branding/assets/logo.png and sajjad-login-branding/assets/login.css.

Step 1: Replace the WordPress Logo

The logo on the login screen is a background image on the #login h1 a element. You can replace it by printing a small amount of CSS during the login_enqueue_scripts action:

function sajjad_login_logo() {
$logo_url = plugins_url( 'assets/logo.png', __FILE__ );
?>
<style>
#login h1 a,
.login h1 a {
background-image: url('<?php echo esc_url( $logo_url ); ?>');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 240px;
height: 80px;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'sajjad_login_logo' );

Adjust the width and height to match your logo's proportions. A PNG with a transparent background, or a small WebP, works best.

If you're using this in a child theme instead of a plugin, replace plugins_url( 'assets/logo.png', __FILE__ ) with get_stylesheet_directory_uri() . '/assets/logo.png'.

You can also reuse the site logo you've already set in WordPress:

function sajjad_get_site_logo_url() {
$logo_id = get_theme_mod( 'custom_logo' );

if ( ! $logo_id ) {
return '';
}

$image = wp_get_attachment_image_src( $logo_id, 'medium' );

return $image ? $image[0] : '';
}

Then use sajjad_get_site_logo_url() in place of the hard-coded path, with a fallback if it returns an empty string.

Step 2: Change the Logo Link and Text

By default, the login logo links to WordPress.org, and its text says "Powered by WordPress." Change both so the logo points to your home page and uses your site name:

function sajjad_login_logo_url() {
return home_url( '/' );
}
add_filter( 'login_headerurl', 'sajjad_login_logo_url' );

function sajjad_login_logo_text() {
return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'sajjad_login_logo_text' );

The login_headertext filter controls the link text, which is used by screen readers, so setting it to your site name also improves accessibility.

Step 3: Add a Custom Stylesheet

For more than a logo change, load a full stylesheet on the login page:

function sajjad_login_stylesheet() {
wp_enqueue_style(
'sajjad-login',
plugins_url( 'assets/login.css', __FILE__ ),
array( 'login' ),
'1.0.0'
);
}
add_action( 'login_enqueue_scripts', 'sajjad_login_stylesheet' );

Listing login as a dependency makes sure your CSS loads after WordPress's default login styles, so your rules take priority.

Here's an example login.css that gives the page a clean, branded look:

body.login {
  background: #f1f5f9;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.login form {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  padding: 28px 24px;
}

.login label {
  color: #0f172a;
  font-weight: 600;
}

.login input[type="text"],
.login input[type="password"] {
  border-radius: 8px;
  border-color: #cbd5e1;
  padding: 6px 12px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.wp-core-ui .button-primary {
  background: #2563eb;
  border-color: #2563eb;
  border-radius: 8px;
  padding: 0 20px;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.login #nav a,
.login #backtoblog a {
  color: #334155;
}

.login #nav a:hover,
.login #backtoblog a:hover {
  color: #2563eb;
}

Use your browser's Inspect tool on the login page to find other selectors you want to change. Useful ones include #loginform, #login_error (error messages), .message (notices), #nav (the lost password link), and #backtoblog (the "Go to" link).

Step 4: Add a Custom Message Above the Form

The login_message filter lets you add text above the login form. For example, a friendly note for members:

function sajjad_login_message( $message ) {
if ( empty( $message ) ) {
$message = '<p class="message">' . esc_html__( 'Welcome back! Log in to access your account. Need help? Contact support@example.com.', 'sajjad' ) . '</p>';
}
return $message;
}
add_filter( 'login_message', 'sajjad_login_message' );

The check for an empty message prevents your text from replacing WordPress's own messages, such as "You are now logged out."

The login screen is also used for registration and password resets. If you only want your message on the main login form, check the action query parameter:

function sajjad_login_message_only_on_login( $message ) {
$action = isset( $_REQUEST['action'] ) ? sanitize_key( wp_unslash( $_REQUEST['action'] ) ) : 'login';

if ( 'login' !== $action || ! empty( $message ) ) {
return $message;
}

return '<p class="message">' . esc_html__( 'Welcome back! Please log in.', 'sajjad' ) . '</p>';
}
add_filter( 'login_message', 'sajjad_login_message_only_on_login' );

Use either this version or the previous one, not both.

Step 5: Add Content to the Footer

The login_footer action lets you print content below the form, such as a copyright line or links to your privacy policy:

function sajjad_login_footer() {
printf(
'<p class="sajjad-login-footer" style="text-align:center;margin-top:24px;color:#64748b;">&copy; %1$s %2$s</p>',
esc_html( wp_date( 'Y' ) ),
esc_html( get_bloginfo( 'name' ) )
);
}
add_action( 'login_footer', 'sajjad_login_footer' );

WordPress already shows a privacy policy link on the login page if you've set one under Settings > Privacy.

Step 6: Hide the Language Switcher

If your site has multiple languages installed, WordPress shows a language dropdown on the login page. If you don't want it, disable it with a filter:

add_filter( 'login_display_language_dropdown', '__return_false' );

Step 7: Use a Generic Error Message

By default, WordPress's login errors can reveal whether a username exists. A generic message is a small privacy improvement:

function sajjad_generic_login_error() {
return esc_html__( 'The login details you entered are incorrect. Please try again.', 'sajjad' );
}
add_filter( 'login_errors', 'sajjad_generic_login_error' );

This is a minor measure, not a replacement for strong passwords, two-factor authentication, and the other steps covered in a full WordPress security plan.

Redirect Users After Login

By default, WordPress sends users to the dashboard after login. For membership sites, stores, or community sites, you'll usually want subscribers or customers to land somewhere else. The login_redirect filter handles this:

function sajjad_login_redirect( $redirect_to, $requested_redirect_to, $user ) {
if ( ! ( $user instanceof WP_User ) ) {
return $redirect_to;
}

// Respect an explicit redirect request, such as from a protected page.
if ( ! empty( $requested_redirect_to ) && admin_url() !== $requested_redirect_to ) {
return $redirect_to;
}

if ( user_can( $user, 'edit_posts' ) ) {
return admin_url();
}

return home_url( '/account/' );
}
add_filter( 'login_redirect', 'sajjad_login_redirect', 10, 3 );

Editors, authors, and administrators go to the dashboard, while everyone else goes to the /account/ page. Change that path to wherever your members should land.

You can also control where users go after logging out:

function sajjad_logout_redirect( $redirect_to, $requested_redirect_to, $user ) {
return home_url( '/' );
}
add_filter( 'logout_redirect', 'sajjad_logout_redirect', 10, 3 );

Should You Change the Login URL?

Some site owners change the default /wp-login.php address to something custom, such as /team-login/, to reduce automated bot traffic. Plugins like WPS Hide Login make this easy without editing core files.

This can cut down on noise in your logs, but it's not a true security measure on its own. Bots can sometimes discover the new URL, and a changed URL doesn't protect weak passwords. If you do change it:

• Write the new URL down somewhere safe.
• Make sure any links to the login page, such as in your menu or emails, use the new address.
• Test logging in, logging out, and password resets.
• Know how to undo it: deactivating the plugin (by renaming its folder over SFTP, if necessary) restores the default URL.

Adding a Login Form to a Regular Page

Sometimes you don't want users to see the WordPress login screen at all. You can place a login form on any page:

• In a block theme: Use the Login/out block (core/loginout) and enable "Display login as form" in its settings. You can place it in a page or template.
• With code: The wp_login_form() function outputs a standard login form. You could wrap it in a shortcode:

function sajjad_login_form_shortcode() {
if ( is_user_logged_in() ) {
return '<p>' . esc_html__( 'You are already logged in.', 'sajjad' ) . '</p>';
}

return wp_login_form(
array(
'echo'     => false,
'redirect' => home_url( '/account/' ),
)
);
}
add_shortcode( 'sajjad_login_form', 'sajjad_login_form_shortcode' );

Add [sajjad_login_form] to any page with a Shortcode block. Password resets and error messages will still use the default login screen, so it's still worth branding that page.

Best Practices

Keep it simple: The login page should load quickly and be easy to use. Avoid heavy background videos or large images.

Maintain accessibility: Keep strong contrast between text and background, keep visible focus styles, and don't hide field labels.

Test all login flows: Check logging in, failed logins, logging out, lost password, password reset, and registration if it's enabled.

Test on mobile: Make sure the form and logo scale properly on small screens.

Use a custom plugin for branding: This keeps the login customizations independent of your theme.

Have a recovery plan: Always keep SFTP or hosting file manager access available, so you can disable a broken snippet if you get locked out.

---

FAQ: Customizing the WordPress Login Page

---

Conclusion

Customizing the WordPress login page is a quick way to make your site feel more polished and consistent. A plugin like LoginPress lets you change the logo, background, and form styles visually in minutes, while a handful of hooks in a small custom plugin give you precise control without adding another dependency. You can also add welcome messages, redirect users to the right page after login, and place login forms directly on your own pages.

Start with the basics: replace the logo, point it to your home page, and adjust the colors to match your brand. Then consider redirects and messages that make life easier for your users. Keep your changes in a plugin or child theme, test every login flow, and make sure you always have a way to reach your files if something goes wrong.