Custom WordPress login page PSD – Freebie

WordPress is awesome, but admit it the WordPress login screen is pretty boring. So today I decided to customize the login screen of my website.  I wanted to add a background image for the login screen instead of the blank white screen. Then I wanted to customize the login form look and feel a bit. I also wanted to change the logo above the login form and  direct it to my site homepage instead of the WordPress homepage. I created a PSD file of how I wanted it to look like . Then I applied it to my login screen using WordPress functions.

First to change the login logo url we use the add_filter function. Reference . This changes the login-page logo link from wordpress site to our own blog url. In order to do that add the following code snippet to your functions.php file.

 function custom_login_headerlink(){
	$url = bloginfo('url');
	echo $url;


Next customizing the login screen style. We can do it with the login_head() function – Reference . We use this function to pass a custom stylesheet to the login page header. With this custom stylesheet we customize the various elements on the login screen. Add the following code snippet to your functions.php file

Checkout a demo

Ge the PSD + the function.php file – Download

  • Gramos1995

    Awesome really good! Thumbs up for you

  • Wcten

    Where do I put function.php file?

    • jinsona

      Copy its contents to the functions file of your theme. Add the background image and logo image to the images folder of your theme.

  • Hi Thanks for the code. Its really useful. 

  • Very cool. Thank you.

  • R3m1ck

    Great tutor !! , awesome dude !!

  • Aartiaarti98
  • BloggerTG

    How to solve this problem, please help me soon !


    Very good work here, good and thanks for all code. The name keeps popping up when powered by wordpress while the mouse on the logo? Its change?

  • very useful and interesting

  • Soumyakhare Fgs

    edited the functions php. uploaded background image. but still grey background is visible. how to use my background image i uploaded in images


    Thanks, it is perfect!!!

  • Charmont

    the error message doesn’t show !! only the red rectangle (this one : #login_error )