Make wp-login.php look like part of your site
Custom Login Page restyles WordPress's login screen from top to bottom: your logo, colors, fonts, layout and animations, all through settings, no theme or plugin edit required.
- A custom logo, background, form and button, styled independently.
- Nine web fonts available for body text, inputs and the button.
- A left, right or centered form layout, with adjustable column width.
- A raw CSS field for anything the settings don't cover.
What does Custom Login Page do?
When the custom_login_page module is active, TOWP_Custom_Login_Page hooks into login_head to print a generated stylesheet that restyles wp-login.php: the logo, background, form, inputs, buttons, the Remember Me checkbox and several elements that can be hidden entirely. Any selected web font gets pulled in through login_enqueue_scripts via Bunny Fonts, a privacy-respecting alternative to Google Fonts. Every color, size and toggle only produces CSS when it's actually configured; finally, a raw Custom CSS field at the end lets anything the settings don't cover get added directly, scoped to the login page.
wp-login.php still says WordPress, not your brand
Everything past the login screen can carry a site's branding; however, the first screen anyone sees usually doesn't.
The first screen a client sees is the least branded one
Everything else on a maintained site can carry a client's branding, but the login page they see before reaching any of it still shows WordPress's own logo on a plain grey background.
Restyling it usually means custom code
As a result, changing the login page normally means writing CSS into a plugin file or a functions.php snippet, hooked into login_enqueue_scripts by hand.
Every part of the login page, as a setting
Because the module turns the whole visual surface of wp-login.php, logo to button hover color, into fields instead of hand-written CSS, nothing needs a code editor.
Logo, background, form and buttons
Each major part of the page gets its own set of colors, sizes and options, independent of the others.
Nine web fonts, loaded automatically
First pick a font for the body text, the inputs, or the button; then the module pulls it in through Bunny Fonts without any extra setup.
A Custom CSS field for the rest
The Custom CSS field accepts anything the settings don't cover as raw CSS, scoped specifically to wp-login.php.
Every visual detail, covered
Every capability below is present in the supplied PHP class and its settings registration; in other words, none of it is aspirational.
Custom image, size and link
Replace the WordPress logo with your own image, set its height in any unit, and choose where it links to.
Color, image or both
Set a background color, an image with cover, contain or auto sizing, and horizontal and vertical alignment.
Default, left or right form position
Position the login form centered, or offset it to one side for a split-screen look, with an adjustable column width.
Nine fonts via Bunny Fonts
Inter, Roboto, Open Sans, Lato, Nunito, DM Sans, Poppins, Plus Jakarta Sans and Geist, loaded through a privacy-respecting font host.
A fully custom checkbox
The checkbox gets rebuilt with its own fill, border and checkmark colors, sized independently of the browser default.
Independent background and form motion
The background and the form can each animate in with a different effect, fade, slide from any direction, or zoom, with their own duration and delay.
Where a branded login page helps most
The module supports every site where the login screen is someone's first real impression.
Agency-branded client logins
Give every client site a login page that matches their brand, instead of a generic WordPress screen.
Membership and customer portals
Make the first screen members or customers see feel like part of the product, not a WordPress admin artifact.
Split-screen brand moments
Use the left or right layout with a full background image to turn the login page into a small piece of brand storytelling.
A login page that looks like it belongs
The module combines deep visual control, safe defaults and, if something looks wrong, an easy way back.
Scoped strictly to the login page
The verified implementation adds nothing outside wp-login.php, and generates only what's configured.
CSS generated only for configured fields
Each rule only gets added to the output if its corresponding setting was actually changed from empty or default.
Fonts loaded only when selected
Bunny Fonts only gets enqueued if at least one font family was actually chosen; nothing loads by default.
Scoped entirely to the login page
Every hook this module uses, login_head and login_enqueue_scripts, only fires on wp-login.php, with zero effect elsewhere.
Sanitized values, stripped custom CSS
The code validates every input and treats the raw CSS field as text, not markup.
Colors and URLs are sanitized
Every color passes through sanitize_hex_color(), and every URL passes through esc_url(), before the module uses it in the generated CSS.
Custom CSS is stripped of tags
Because the raw Custom CSS field passes through wp_strip_all_tags(), it can't be used to inject HTML or scripts.
Units and choices are restricted to fixed lists
The module checks sizing units, background sizing, form layout and border styles against a fixed list of allowed values.
Administrator-only configuration
Only an administrator with access to TheOneWP settings can change how the login page looks.
Built around native WordPress login hooks
The supplied code integrates through APIs present in WordPress core; this page makes no compatibility claim beyond the verified implementation.
login_head
The module prints the generated stylesheet in the login page's own head section, the standard WordPress hook for this purpose.
Bunny Fonts
Web fonts load from fonts.bunny.net, a GDPR-friendly alternative to Google Fonts with no personal-data logging by default.
login_headerurl and login_headertext
The logo's link and tooltip text are set through WordPress's own dedicated login page filters.
TheOneWP versus common alternatives
Compare the verified Custom Login Page implementation with a typical hand-written login CSS snippet.
| Capability | TheOneWP Custom Login Page | Other common solutions |
|---|---|---|
| Restyling the login page | Every major element, settings-based, no code | Usually requires a custom CSS file or a code snippet |
| Font loading | Nine fonts via a privacy-respecting host, loaded on demand | Often a manual @import or a separate font plugin |
| Split-screen layout | Built-in left/right layout with adjustable width | Requires custom CSS and manual positioning |
| Reverting changes | One Reset to defaults button | Requires manually removing or reverting the custom code |
| Administration | One settings screen for the whole login page | Spread across a child theme's files and a code editor |
Restyle the login page in four steps
Start broad with logo and background, then refine typography, form and button details.
Enable Custom Login Page
Activate the module from the TheOneWP Login settings tab.
Set the logo and background
Upload a logo, set its size and link, then choose a background color or image.
Style the form, inputs and button
Adjust colors, fonts, sizes and borders for the form panel, its inputs and the login button.
Add Custom CSS and preview
Use the Custom CSS field for anything left uncovered, then open the login page in a private window to check the result.
Style with readability in mind
Even so, a login page still has one job: getting the right person logged in without friction.
Match the login page to the rest of the brand
Reuse the same colors, fonts and logo that appear elsewhere on the site for a consistent feel.
Keep contrast readable
A background image or color behind the form should still leave labels and input text easy to read.
Test with an actual login attempt
Confirm error messages, the Remember Me checkbox and the reveal-password icon still look right, not just the empty form.
Use Custom CSS sparingly and specifically
Target selectors mentioned in the field's own hint, like body.login or #loginform, rather than broad rules that might affect more than intended.
Avoid assumptions that cause confusion
The module has a defined set of toggles and options that are easy to overlook at a glance.
Disabling an element and forgetting why
Elements like the language selector or the lost password link get hidden with a dedicated toggle; if one seems to be missing, that's the first place to check.
Expecting a font that isn't in the list
Only the nine listed fonts are available through the built-in selector; anything else needs Custom CSS with a manually hosted font.
Setting a background image without adjusting alignment
A background image can crop unexpectedly if the horizontal and vertical alignment don't match how the image was designed.
Custom Login Page FAQ
These answers come directly from the verified class and its settings registration.
What does Custom Login Page do?
It restyles the WordPress login page, wp-login.php, with a custom logo, background, form colors, button styling, typography and optional animations.
Do I need to write any CSS to use it?
No. Every major element has its own settings; a Custom CSS field is available for anything beyond that, but it isn't required.
Where do the custom fonts come from?
From Bunny Fonts, a privacy-respecting alternative to Google Fonts, loaded automatically only when a font is actually selected.
Can I put the login form on one side of the screen with a background image?
Yes. The form layout can be set to left or right, with an adjustable column width, for a split-screen look.
Can I hide the language switcher or the lost password link?
Yes. Dedicated toggles can hide the logo, language selector, lost password link, back-to-site link, Remember Me, and the reveal-password icon individually.
Does this module affect the WordPress admin dashboard?
No. Every hook it uses only fires on the login page itself, so wp-admin stays completely unaffected.
Can I add my own CSS on top of the built-in options?
Yes, through the Custom CSS field, which applies raw CSS scoped to wp-login.php.
Can I animate the login form or background?
Yes. The background and the form can each use a fade, slide or zoom effect, with independently configurable duration and delay.
What happens if I want to undo all my changes?
The Reset to defaults button returns every setting to WordPress's original login page appearance.
Is the custom logo required to link to the homepage?
No. A custom logo link URL can point anywhere; leaving it blank defaults to the site's homepage.
Stop showing clients a generic WordPress login.Make it look like the rest of the site.
Use Custom Login Page to restyle the logo, background, form and buttons on wp-login.php, no code required.