Customise the login page of your websites that are hosted with Headwall Hosting. Use the built-en “fancy login” to add your branding.
If you’re starting out with a new WordPress site then one of the first screens you’ll see a lot of is your login page. Although it works perfectly well, if you’re building a site for a client then it’s the little details like branding their login page that can make all the difference.
When you host your WordPress site with Headwall Hosting, you get access to the built-in “fancy login” option.
When you enable Fancy Login, you’ll see that clicking on the logo above the login box will now take you to your site, instead of to wordpress.org. You’ll also see the “Lost your password?” button is more prominent… and the login box has softer corners.
Of course, the big difference is that you can start changing the colours and images. We provide four filters that are super easy to override.
| Filter | Description |
|---|---|
| fancy_login_logo_url | Specify the logo for the top logo. It’s best to keep something in a widescreen aspect. Aim for something like 400×120 pixels and it should look good. |
| fancy_login_background_url | You can specify a full background wallpaper image here. Sometimes this can look great, but it can also look a bit busy… a bit crass… depending on your image. |
| fancy_login_button_bg | The HTML colour for the login button background. You can do things like “black”, “#404040” or “rgb( 0, 128, 0 )” |
| fancy_login_button_fg | The HTML colour for the login button foreground. |
How to Use Fancy Login to Customise Your Site
As a simple example, we’ll implement these filters in our custom child theme. Create a file in your custom child theme called functions-fancy-login.php and paste the following into it:
<?php
/**
* Customise Fancy Login on the wp-login.php page.
* https://headwall-hosting.com/getting-started/customise-your-sites-wp-login-page/
*/
// Block direct access.
if (!defined('WPINC')) {
die;
}
// function custom_fancy_login_logo_url($logo_url) {
// return 'https://cdn.headwall-hosting.com/wp-content/uploads/yyyy/mm/my-website-login-logo.png';
// }
// add_filter('fancy_login_logo_url', 'custom_fancy_login_logo_url');
// function custom_fancy_login_background_url($background_url) {
// return 'https://cdn.headwall-hosting.com/wp-content/uploads/yyyy/mm/your_background_image.jpg';
// }
// add_filter('fancy_login_background_url', 'custom_fancy_login_background_url');
function custom_fancy_login_button_bg($colour) {
return '#404040';
}
add_filter('fancy_login_button_bg', 'custom_fancy_login_button_bg');
function custom_fancy_login_button_fg($colour) {
return 'white';
}
add_filter('fancy_login_button_fg', 'custom_fancy_login_button_fg');
Now we need to reference this file from our custom child theme, so open functions.php and add the following lines to it:
// Fancy login require_once 'functions-fancy-login.php';
That’s it. Log out of your site and go to its wp-login.php page and you should see your newly customised login form. Just uncomment the logo and background image filters to set your own images.