The WordPress login page isn’t very welcoming, is it? It’s more like a boring door in an alley than spectacular pearly gates. But how you initiate users into the secret part of your site matters, especially if you have something special in there.
The portal through which people enter your world helps build anticipation and primes their peepers for what is inside. Branding your WordPress sign-in page can help you elevate your protected content and WordPress admin dashboard, telling your visitor, this is no ordinary WordPress site.
In this post, I’m going to show you what goes into building a custom WordPress login page. I’ll then show you how to make the changes using the appropriate CSS and/or PHP code, for those of you who want full control or only want to change one little thing.
Then, we’ll cover how to make changes with Branda, (formerly the Ultimate Branding plugin), which will allow you to completely customize the look of your login form, quickly and without touching any code. We also have a quick video that shows you exactly how to set up Branda, so stay tuned for that or skip ahead.
Content
How to customize the different login page elements with CSS and PHP:
- How to Add Custom CSS to Your Login Page
- WordPress Login Elements CSS Selectors
- A Crash Course in CSS
- How to Change Your Admin Login Page with PHP
How to customize the different login page elements using Branda:
- Logo on the Login Screen
- Login Page Background
- Login Form
- Remember Me Checkbox
- Error Message
- Links Below the WordPress Login Form
- Login Redirect
WordPress Login Page Customize
The WordPress login page is just like any other page on your WordPress site:
- You can change the styling and colors by editing the element with CSS
- You can change the functionality or add, subtract, and move elements by changing the layout using hooks and filters in PHP.
How to Add Custom CSS to Your WordPress Login Page
Your WordPress sign-in page doesn’t use the stylesheet that is included with your theme. This means that if you try to add CSS to customize the login page to your styles.css file in your theme folder, the changes will not appear. You’ll need to add your custom CSS styles to the head of your login page with PHP.
If you have just a few lines of CSS, you can create a custom function, and use the login_enqueue_scripts hook to insert CSS into the head of the login page.
In the example above, I want to remove the Back to link under the login form. I’m only changing one thing, but you can customize multiple elements in between the
