In a previous post I wrote about the possibility to adjust the login page in your WordPress backend. But I still receive a lot of questions about it and I would like to point out three simple ways, so that you can customize with little effort the login page to your site – a nice added value in terms of customer projects which makes it look more professional instead having always the WordPress logo and the link displayed.
In the first step I adjust the logo to the login page. We wrote about it here already. To make it simple, just write the stylesheet in the header, in our older tutorial we included an external stylesheet.
Change Logo
In the first code example I include the favicon, a fast and simple way. Alternatively you can include a logo of your Theme, therefore the 2nd code example. Each of the following example belongs into the functions.php of the Themes.
function fb_custom_login_logo() {
$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('url') . '/favicon.ico) no-repeat 30px center !important; } </style>';
echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );
function fb_custom_login_logo() {
$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('template_directory') . '/images/your-logo-image.png) no-repeat center top !important; } </style>';
echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );
Now we adjusted the logo, but the name at the hover effect is still not the one we want. Therefore is a hook available.
Change name
We correspond with the hook and deliver with the following code snippet the name of the blog, which lies in the database. Alternatively you can query static content or your own fields.
function fb_login_headertitle() {
return esc_attr( get_bloginfo( 'name', 'display' ) );
}
add_filter( 'login_headertitle', 'fb_login_headertitle' );
Change link
Now we want to adjust the link, so a klick on the logo will send us to the frontend of the website. And again, there is a hook available.
function fb_login_headerurl() {
return esc_url( home_url( '/' ) );
}
add_filter( 'login_headerurl', 'fb_login_headerurl' );
Three simple possibilities which should belong in almost every Theme. So that the login page perfectly fits to the website. It looks more professional and your customer will be thankful.
Comments
10 responses to “Custom WordPress Login-Page”
I’m sure someone will eventually ask – if you want the same login page on every site in a WordPress network, then use this code in the mu-plugins folder, not the theme’s functions file. 🙂
You’ll have to alter where it’s looking for images and the stylesheet but it’s easy enough. See my post here:
http://wpmututorials.com/how-to/custom-branded-login-screen-for-wpmu/
@Andrea_R Thanks for the usefull tip 🙂
the mu-plugins folder also works in single installs if you want plugins nobody can disable from the backend. 🙂
Nice blog post.
Is it hard to change the login url? /wp-admin and user:admin is to predictable.
@Andrea_R: two nice tips; maybe you write an small guest post in our advent calender?
When using a child theme replace
get_bloginfo(‘template_directory’)
for
get_bloginfo(‘stylesheet_directory’)
to get to the logo image in your child theme folder.
Yes, you have right. i have forgotten to write this, nice supplement for this post.
[…] has been laying into the tutorials this week, with a custom login page tutorial and a walkthrough of the upcoming post formats […]
[…] Custom WordPress Login-Page (WP Engineer) […]
Great post, Frank! I recently stumbled upon this site and got to tell you that I’m glad I did. Anyway, I notice you guys do guest posts. I’m very interested in contributing a post. Who do I talk to about that?