Custom WordPress Login-Page

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 are closed.

10 comments

  1. Andrea_R

    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/

  2. Michael

    @Andrea_R Thanks for the usefull tip :)

  3. Andrea_R

    the mu-plugins folder also works in single installs if you want plugins nobody can disable from the backend. :)

  4. geir

    Nice blog post.

    Is it hard to change the login url? /wp-admin and user:admin is to predictable.

  5. Frank

    @Andrea_R: two nice tips; maybe you write an small guest post in our advent calender?

  6. sergio vieira

    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.

  7. Frank

    Yes, you have right. i have forgotten to write this, nice supplement for this post.

  8. Brian Flores

    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?

2 pingbacks

  1. Community links: Open source motivations edition | WPCandy
  2. Weekly WordPress Review » WPCanada