wordpress-logo-circle

Quick Custom WordPress Login

A custom login screen with the client’s logo looks professional and, if you administer a log of sites, makes it a lot easier to see what site you’re on when WordPress logs you out. Though the WordPress codex gives some great ideas it’s a bit long. So here’s my

Bare Bones Custom WordPress login screen.

  1. Paste it into your theme’s functions.php file.  You are using a child theme or some other way to not change the parent theme, right?
  2. Just find a logo you want to use and either copy the link from the media library or put the logo in your theme. Many developers add the image to an images file in the child theme
  3. Replace the image url, width and height (default is 80px square) in the code.
/* Add custom login logo. */ function my_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { background-image: url(IMAGE-URL); padding-bottom: 10px; width:WIDTH; height:HEIGHT; background-size:WIDTH HEIGHT; } </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_logo' ); function my_login_logo_url() { return home_url(); } add_filter( 'login_headerurl', 'my_login_logo_url' ); function my_login_logo_url_title() { return 'go to site homepage'; } add_filter( 'login_headertitle', 'my_login_logo_url_title' ); /** end custom login code.For more details see https://bowerwebsolutions.com/quick-custom-wordpress-login/ *or https://codex.wordpress.org/Customizing_the_Login_Form*/

Details came from and there are a lot more details in the WordPress codex which is at  codex.wordpress.org/Customizing_the_Login_Form.

For a more elegant solution which we use when the public is signing into the site is the  theme my login plugin . But theme my login is more involved and more likely to cause issues.