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: Appearance > Login Screen

note

This screen moved from Settings to Appearance in 1.30.0, beside Email Branding.

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, and the hover states on the "Lost your password?" and "Go to [site]" links.

The Accent Color panel, saying it is using the theme's main color and showing that value in the picker
The panel says where the color comes from, so an empty setting does not read as a broken one.

Leave it empty and the block theme's main color is used — its button background, then its link color, then a palette entry named primary, brand, accent or similar. On a classic theme, or a block theme that defines none, nothing is emitted and WordPress' own login styling is left alone.

Sites that were on an earlier version keep their color unless it was still the old #2271b1 default, which is migrated to empty once — under that value the login screen emitted no accent styling at all, so it was the unset state in everything but name.

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)

The same chain, with the same Site Icon fallback, is what Email Branding puts at the top of the system emails.

Technical Details​

  • Settings are stored as a single serialized option (yoko_login_screen) using the WordPress Settings API with show_in_rest enabled.
  • The accent color resolves through YokoCo\Branding\ThemeStyles, which reads theme.json global styles. yoko_login_screen_accent_color filters the resolved value; yoko_branding_primary_color filters the theme's contribution to it, for both this screen and the emails.
  • 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.