Branding & Emails
How Can I Put My Own Logo And Colours On The Login Screen?
Quick Answer
Go to Magic Link -> Settings -> Branding and set a Logo, a Primary Colour, and optional Custom CSS. They apply to the WordPress login screen and to the Magic Link email.
This is free.
Why This Helps
The login screen is often the first thing a member, customer, or student sees — and by default it shows the WordPress logo and links away to wordpress.org.
That matters more than it looks:
- Trust. Someone who clicks a login link in their inbox needs to recognise where they landed. An unbranded screen looks like it could belong to anyone, and a visitor who hesitates is a visitor who does not log in.
- Passwordless logins live in email. People check the message, then the page it opens. If the two look nothing alike, the link feels suspicious — exactly the instinct you want people to have about real phishing.
- It is the cheapest polish available. One logo and one colour, set once, and every login from then on looks deliberate.
What You Can Set
In Magic Link -> Settings -> Branding:
| Setting | What it does |
|---|---|
| Logo | Replaces the WordPress logo above the login form and appears at the top of the Magic Link email. Use the Browse button to pick from your media library. |
| Primary Colour | Used for the login button and links. Accepts a 3 or 6 digit hex value, with or without the leading # — #0073aa, 0073aa, and #07a all work. |
| Custom CSS | Extra styling for the login screen, for anything the two settings above do not cover. |
Leave any field empty to keep the WordPress default for that piece. You do not have to fill in all three.
How To Set It Up
- Go to
Magic Link -> Settings -> Branding. - Next to Logo, click Browse and choose an image from your media library.
- In Primary Colour, enter your brand colour.
- Add Custom CSS only if you need it.
- Save changes.
- Open your login page in a private window to check the result.
Use a private or incognito window for step 6. If you are already logged in, WordPress sends you to the dashboard instead of showing the login screen.
Choosing A Logo
- A wide logo works better than a tall one — the space above the login form is short and wide.
- Around 320 pixels wide is a good target.
- Use a transparent PNG or an SVG so the logo sits cleanly on the background.
A Note On Custom CSS
Custom CSS is filtered before it is used. Angle brackets, script tags, and javascript: values inside url() are stripped out. This is deliberate: the login screen is the most security-sensitive page on your site, and it is not a place to run scripts.
If a rule you added does not appear, that filtering is the first thing to check.
Branding Versus Email Content
These are two different settings screens, and it is easy to mix them up:
Settings -> Branding— the logo and colours, on the login screen and the email. Free.Settings -> Email— the subject line and message text of the Magic Link email. Pro. See Customize the Magic Link email.
Branding changes how the email looks. The Email tab changes what it says.