Quick Custom WordPress Login
A custom login screen with the client’s logo looks professional and, if you administer a lot 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.
- 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? An alternative to functions.php is the My Custom Functions plugin which has the added advantage of not being theme dependent so you won’t have to copy this code over if you change themes.
- 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
- Replace the image url, width and height (default is 80px square) in the code. Again, you can get these dimensions from the media library.
<?php /* 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.