Skip to main content

Login Screen

Customize the WordPress login page (wp-login.php) with your own branding. The Login Screen settings page provides a live preview that mirrors the actual login page layout, so you can see changes in real time before saving.

Location: Settings > Login Screen

Settings​

Upload a custom logo to replace the default WordPress logo on the login page. When no logo is set, the Site Icon (configured under Settings > General) is used as a fallback.

The logo is rendered as a CSS background-image with background-size: contain, centered in an 80px-tall area spanning the full width of the login box (320px).

Accent Color​

Controls the color of the "Log In" button and input focus states. Defaults to #2271b1 (WordPress blue). The accent color also applies to hover states on the "Lost your password?" and "Go to [site]" links.

Background Color​

Sets the full-page background color of the login page. Defaults to #f0f0f1.

Additional CSS​

A free-text CSS editor for further customization. Rules entered here are appended after the generated styles, so they can override any of the above settings. CSS is sanitized on save to remove dangerous at-rules (@import, @charset, @font-face) and functions (expression(), javascript: URLs).

note

Custom CSS is not reflected in the live preview. Save and visit wp-login.php to verify custom CSS rules.

Screenshots​

Settings page with live preview​

Login Screen settings page with live preview

Resulting login page​

Customized wp-login.php page

Logo Fallback Chain​

The logo displayed on the login page follows this priority:

  1. Explicitly uploaded logo via the Login Screen settings
  2. Site Icon (Settings > General > Site Icon)
  3. WordPress default logo (when neither is set)

Technical Details​

  • Settings are stored as a single serialized option (yoko_login_screen) using the WordPress Settings API with show_in_rest enabled.
  • Styles are injected via wp_add_inline_style() on the login_enqueue_scripts hook.
  • The logo link URL is changed to the site home page, and the link text is set to the site name for accessibility.
  • The live preview uses the same HTML structure and class names as wp-login.php, ensuring visual parity with the actual login page.