We recently launched a new website for Australian telecommunications infrastructure provider UCG (and New Zealand). We wanted a simple way to make a nice looking login page for their staff to enter the website which we can do with a little bit of custom CSS and a hook in the Wordpress functions.php file.
Add this to your theme's functions.php file:
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/custom-login-styles.css" />';
}
add_action('login_head', 'my_custom_login');
`function my_login_logo_url() {
return get_bloginfo( 'url' );
}
// changing the logo link from wordpress.org to your site
function mb_login_url() { return home_url(); }
add_filter( 'login_headerurl', 'mb_login_url' );
function my_login_logo_url_title() {
return 'Your Page Title';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
function login_error_override()
{
return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');
function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
OK, so now we have a link to a custom CSS file where we can style up the login page. That file is /custom-login-styles.css so make a blank file with this name and add it to your child theme.
Now we can style it. Here's what we're running for UCG.
body.login {
background: #252525 url(/logo.svg) no-repeat center center;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.login h1 a {
padding: 20px!important;
background-size: 60% autoimportant;
height: auto!important;
width: auto!important;
}
.login #nav, .login #backtoblog a, .login #nav a { color: #999; }
.login #backtoblog a:hover, .login #nav a:hover { color: #fff!important; }
Now we have a custom branded login page for Wordpress without any plugins.
We are using it on:
Print Miami
Monster Tees
Sales Tax USA
Dark Fibre
HFC
FTTB
SFP
Top comments (0)