Every time your staff sign in, they see a big WordPress logo, and clicking it takes them to wordpress.org instead of your website. It works, but it does not look like your business. If customers log in too, on a members area or a site where clients download files, the plain grey screen can even make them wonder if they are in the right place.
You can customize the WordPress login page to show your own logo, colours and link, either with a plugin or with a short code snippet. Both routes are below. Keep in mind that this is a cosmetic change; it is easy to confuse with security changes that do something quite different.
What you can change when you customize the WordPress login page
The standard login screen at /wp-login.php is generated by WordPress itself, not by your theme. That is why your header, footer and fonts do not appear on it, and why editing the theme in the Site Editor or the Customizer has no effect there. It has a few parts you can sensibly change:
- The logo above the form, and where it links to.
- The background colour of the page, and the colours of the form box and button.
- A short message above or below the form, such as “Staff login. Forgotten your password? Use the link below.”
The fields themselves, the “Lost your password?” link and the link back to your site should stay as they are. People rely on them, and plugins such as two-factor tools add their own steps to the same screen.
The plugin route
For most owners, a login customiser plugin is the easier choice. LoginPress is one well-known option on wordpress.org, and there are several others that do similar work. Typically they give you a visual editor with a live preview, where you upload a logo, choose a background and set colours without writing any code.
- Take a backup before installing, as with any plugin.
- Install and activate the login customiser you have chosen.
- Open its settings. Many put them inside the Customizer or on their own screen; the plugin’s description will say where.
- Upload your logo and set the logo link to your home page if the plugin offers that option.
- Pick a background colour, or a simple image, and a button colour that matches your brand.
- Save, log out, and look at the result in a private browser window.
You will not need most of the options. Animated backgrounds, custom fonts and video are possible with some plugins, but they slow the page and add nothing for someone who just wants to sign in. Free versions usually cover the logo and colours; extra features vary, so check what you actually need before paying for anything.
Add a logo to the login page with a snippet
If you only want your logo and the right link, a plugin with a whole editor is more than you need. A small snippet does it. You do not need to understand PHP to use one, but you do need to add it somewhere safe.
A typical logo snippet does three things, each through a hook WordPress provides for exactly this purpose:
- It uses the login_enqueue_scripts hook to add a few lines of CSS to the login page, replacing the background image of the logo link (the element at #login h1 a) with your logo file and setting its width, height and background size.
- It uses the login_headerurl filter so the logo links to your home page instead of wordpress.org.
- It uses the login_headertext filter to change the logo’s text, which screen readers announce, from “Powered by WordPress” to your business name.
To add it:
- Upload your logo to the Media Library and copy its file URL from the attachment details.
- Put the snippet in a code snippets plugin, or in a child theme’s functions file. Never paste it into the parent theme’s functions.php, because the next theme update will wipe it. Our post on where to add custom code safely explains the difference.
- Replace the example logo URL in the snippet with yours, and adjust the width and height to suit your logo’s shape.
- Save, then test in a private window while staying logged in in your normal window, so you can undo it if the page breaks.
Only use snippets from sources you trust, such as the official WordPress developer documentation for these hooks, and read what each line does. A snippet with a typo can cause a fatal error. If that happens, a code snippets plugin’s safe mode or WordPress’s recovery mode email will usually get you back in.
Picking and preparing the logo
The logo area above the form is small. A wide horizontal logo works well; a tall stacked one may need a smaller height setting. Use a PNG with a transparent background so it sits cleanly on whatever colour you choose. WordPress does not accept SVG uploads by default, so use PNG or WebP unless you already have a safe way to handle SVG files.
Keep the file light. A logo a few hundred pixels wide is plenty, and running it through our image compressor first keeps the login page quick on a mobile connection. Check that it is readable against the background: a dark logo on a dark page is the most common mistake.
This is not the same as hiding the login page
People often arrive at login page customisation while thinking about security, so it is worth being clear. A new logo and colours change how the page looks. They do nothing to stop someone guessing passwords.
Moving the login page to a different address is a separate change with its own trade-offs, discussed in our post on whether changing the WordPress login URL helps. The change that really protects accounts is a second login step; see how to set up two-factor authentication. A branded login page and two-factor work well together, as long as you test that the two-factor screen still displays properly with your new styling.
A login page for customers instead
If the people logging in are customers rather than staff, you may not want them on wp-login.php at all. Other options keep them inside your normal site design:
- WooCommerce gives customers a My Account page with its own login and registration forms, styled by your theme.
- Membership and course plugins usually provide a login page of their own.
- WordPress has a Login/out block that can show a login form on any page, for simple cases.
Staff can keep using the standard login screen. Deciding which customers and colleagues get a login at all is a separate question, answered in our guide to who should have a login on your WordPress site; it sits within our wider WordPress help guide for owners.
Check it before you tell anyone
- Log in and log out in a private window.
- Click “Lost your password?” and check the reset screens use the same look and still work.
- Look at the page on a phone.
- If you use two-factor or a security plugin, go through a full login with it.
- Clear any caching plugin if the old logo still shows.
Frequently asked questions
What happens to the login page if I deactivate the plugin or snippet?
It goes back to the standard WordPress look, with the WordPress logo and grey background. Nothing else is affected, because the customisation only adds styling and changes the logo link. Keep the logo in the Media Library, so you can switch the customisation back on later without setting everything up again.
Can I use my theme’s logo automatically instead of uploading it again?
It is possible with a slightly longer snippet that reads the site logo set in your theme, but many people simply upload the logo again and use its file URL. That keeps the snippet short and means a theme change does not suddenly alter the login page. Some login plugins can also pick up the site logo for you.
Why does the login page still show the WordPress logo after my change?
The usual causes are caching and a wrong image address. Clear your caching plugin and view the page in a private window. Then open the logo URL from your snippet or plugin setting in a new tab; if it does not load, the address is wrong. Another plugin that also styles the login page can override yours too.
Branding the login screen is a small job, but it involves code in the right place. Our theme customization service makes changes like this in a child theme or snippet, where theme updates do not overwrite them.
Next in this series: How to Change a User’s Email in WordPress
