Branding & Emails
Brand the Magic Link Login Screen and Emails
The default WordPress login screen shows the WordPress logo and links away to wordpress.org, which makes passwordless sign-ins look generic and, to a cautious user, suspicious. Magic Link fixes this for free: go to Magic Link → Settings → Branding, set a Logo, a Primary Colour, and optional Custom CSS, and they apply to both the WordPress login screen and the Magic Link email. No PRO licence is required for branding.
Why branding your login matters
The login screen is often the first thing a member, customer, or student sees, and passwordless logins live in email. People check the message, then the page it opens.
- 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.
- Consistency. If the email and the page it opens look nothing alike, the link feels suspicious, which is exactly the instinct you want people to reserve for real phishing.
- Low effort, lasting polish. One logo and one colour, set once, make every login from then on look deliberate.
What you can set in the Branding tab
In Magic Link → Settings → Branding you have three fields:
| 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 brand your login screen and emails
- 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 as a hex value.
- Add Custom CSS only if you need styling the fields above do not cover.
- Save your changes.
- Open your login page in a private or incognito window to check the result.
Use a private 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 that fits
- 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 and safety
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
Branding and email content are two different settings screens, and it is easy to mix them up:
- Settings → Branding controls the logo and colours, on both the login screen and the email. This is free.
- Settings → Email controls the subject line and message text of the Magic Link email. This is a PRO feature. See Customize the Magic Link email.
Branding changes how the email looks. The Email tab changes what it says.
Conclusion
Branding is the cheapest polish Magic Link offers, and it is free: a logo, a primary colour, and optional CSS in Magic Link → Settings → Branding make every login screen and email look like your own. Once the look is set, the natural next step is the wording — see how to customize the Magic Link email subject and body (PRO).
FAQs
Is login and email branding free in Magic Link?
Yes. The Logo, Primary Colour, and Custom CSS fields under Magic Link → Settings → Branding are part of the free version. They apply to both the WordPress login screen and the Magic Link email, so no PRO licence is needed to make your passwordless logins look on brand.
Does the branding apply to both the login screen and the email?
Yes. The single set of Branding fields covers both places. The logo you upload appears above the login form and at the top of the Magic Link email, and the primary colour is used for buttons and links in both. You set it once and it applies everywhere.
Why doesn't my Custom CSS show up on the login screen?
Custom CSS is filtered for safety before it is applied. Angle brackets, script tags, and javascript: values inside url() are stripped out because the login screen is highly security-sensitive. If a rule does not appear, check whether it relies on any of those stripped elements and rewrite it as plain CSS.
What logo size and format work best?
Use a wide rather than tall image, around 320 pixels wide, because the space above the login form is short and wide. A transparent PNG or an SVG sits cleanly on the background regardless of the page colour, so it looks correct on both light and dark themes.
How do I change the wording of the Magic Link email?
Branding only changes how the email looks. To edit the subject line and message text, use Magic Link → Settings → Email, which is a PRO feature. See Customize the Magic Link email for the full walkthrough.