Home » News & Updates » Getting Started » Customise your Site’s Login Page

Customise your Site’s Login Page

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.

Enable “Fancy Login”
custom wordpress login form
Customise your wp-login page

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.

FilterDescription
fancy_login_logo_urlSpecify 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_urlYou 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_bgThe HTML colour for the login button background. You can do things like “black”, “#404040” or “rgb( 0, 128, 0 )”
fancy_login_button_fgThe HTML colour for the login button foreground.
Fancy Login filters

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 '/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 '/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.

Leave a Comment

Your email address will not be published. Required fields are marked *