How To Customize WordPress Login Screen – Revisited
In a previous tutorial, I showed you How To Customize WordPress Login Screen Without a Plugin. In this tutorial, I will show you a different and better approach to do that.
The problem with my previous tutorial, is that most likely you will lose your changes the next time you upgrade your WordPress version. I myself don´t like to mess with Core wordPress files.
The better approach is to use a snippet of code to add to your theme´s functions.php file. In this case, your custom login image will not be overwritten with the next WordPress version upgrade.
First, read carefully my previous tutorial mentioned above related to Custom WordPress Login Screen.
Would you like to customize the Login screen of your WordPress Website? In this tutorial, I will show you how to Customize the WordPress Login screen without a plugin. Specifically, I will explain how to replace the default WordPress Logo with your Custom Logo, and how to change the URL of the Custom Logo to point to your Website.
BEFORE | Default WordPress Login Screen Logo
The picture below shows how WordPress Login screen is by default. Also the default Logo Link points to the main WordPress Website (wordpress.org).
AFTER | Customized WordPress Login Screen Logo
The picture below shows the customized Login screen for this blog after you add CODE-1. If you also add CODE-2, then when you click on the Custom Logo image you will be redirected to the main Blog.
Custom Login Screen Logo | functions.php
If you want to Replace the default WordPress Logo with your Custom Logo. Then …
Open functions.php file located in your theme´s folder, and add (copy and paste) the following CODE-1. Save the file and upload it to the server.
CODE-1:
<?php
/*******************************CODE-1****************************
* @Author: Boutros AbiChedid
* @Date: May 21, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: Add a Custom image Logo to WordPress Login screen.
* @Tested on: WordPress version 3.3.2
******************************************************************/
function bac_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('. get_template_directory_uri() . '/images/logo-login.png) !important; }
</style>';
}
add_action( 'login_head', 'bac_custom_login_logo');
?>
CODE-1 Notes:
In CODE-1, you need to put the image file (logo-login.png) in the “images” folder of your theme´s directory. If you decide to change your theme, then you must also transfer the image to the new theme´s “images” folder.
The get_template_directory_uri() on line 11 of the code retrieves the template directory URI for the current theme. If you are using a child theme, then the parent theme directory URI will be returned. If you want to get the child theme directory URI, use get_stylesheet_directory_uri() instead.
In my case, I named the Custom Logo “logo-login.png” with a Size of: 310px wide by 70px height. You can name it anything you like and you can change the size too.
CODE-1 works on WordPress 1.5.0 and higher. But I hope that you will upgrade to the latest version.
CODE-1 References:
Custom URL of the Login Screen Logo | functions.php
Once you added CODE-1 to your theme´s functions.php file with your Custom Logo, you probably noticed that once you click on your Custom Logo image, you will be redirected to WordPress Website (wordpress.org). By default the Logo links to the WordPress Website. If you you want to change the link of your Custom Logo to point to your Blog. Then…
Open functions.php file located in your theme´s folder, and add (copy and paste) the following CODE-2. Save the file and upload it to the server.
CODE-2:
<?php
/*******************************CODE-2************************
* @Author: Boutros AbiChedid
* @Date: May 21, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: Change the Custom Logo default link to the
* main Website URL.
* @Tested on: WordPress version 3.3.2
**************************************************************/
function bac_custom_url( $url ) {
return site_url();
}
add_filter( 'login_headerurl', 'bac_custom_url' );
?>
CODE-2 Notes:
You can use CODE-1 alone OR (CODE-1 AND CODE-2) together.
In CODE-2, the login_headerurl filter is used to filter the URL of the logo in WordPress Login page.
The site_url() template tag retrieves the URL for the current Website.
In case of a WordPress Network setup, use network_site_url() instead of site_url() on line 11 of the code.
CODE-2 works on WordPress 1.5.0 and higher. But I hope that you will upgrade to the latest version.
CODE-2 References:
Your Turn to Talk
In this tutorial, I showed you How to replace the default WordPress logo in the Login Screen for a more professional look. I also showed you How to Change the link of the Custom Logo in the Login Screen to point to your Website instead of WordPress.
If you have something to add or anything else to say, please share your opinion in the Comment section. Your opinion matters, unless it is a Spam.
