Customized WordPress login Page Plugin

Well,as in general case,we all want wordpress to reflect the look and feel our our website ,Is not it?So everything works well.You do a lot of customization using plugins,you  build a brand new theme to reflect your own website’s main theme(I mean goal). But after all of these efforts,there comes an issue of customizing login/register/password reset page. by default a wordpress login page looks like this

default wordpress login Page

If you look closely at the default wordpress login page, you will certainly like to modify several things.just to mention,I will list the things here one by one.

  • Logo:-by default,It’s wordpress logo.So after putting so much effort in customizing the theme,don’t you wish,It should be your own logo.I think you want it to be your own logo.
  • The site linked with the logo:If you click on the default wordpress logo it will take you to http://wordpress.org.do you want it to work it in that way? For me absolutely not.It should take to my own website.I believe in giving credits,as you may see from the footer of my site,I have credited wordpress.org,but when the matter comes to my login page ,then I want the clicking on logo should take back to my website.
  • The description(Or more precisely,the title of anchor tag linked with logo):-It shows “powered by wordpress”,but I want it to reflect my own websites description on mouseover,don’t you want so?

Well,I think ,there are more things,like the background color of the page,the text formatting and more,that you may be interested in changing. Now there are tow approaches (or may be there are many approaches that may be used).
1.Editing wp-login.php(bad approach):-Sometimes,people believe in changing the code for wp-login.php and overriding the default logo by uploading their own logo in wp-admin/images directory.In my view,It’s a bad approach,why?because every time you upgrade to a new version of wordpress,you need to repeat the same steps.The second reason,I don’t believe in directly editing the core files,until there is no way to accomplish the task.

2.Use filters/action hooks to overwrite css and site url,header description(better approach):-WordPress provide several hooks to call your own functions at different steps.If you check wp-login.php(not recommended for non tech. users),you will see several hooks,like  login_head,login_headerurl,login_headertitle.There are several more,but for our purpose these three are sufficient. The action hook login_head,allows us to inject own own script and css into the wp-login.php.So we can simply use this to override the default css and force wordpress to use our customized css. The filter hook login_headerurl,can be used to control the url which is linked with the logo,in default case the url is http://wordpress.org.we use it as following.

add_filter("login_headerurl","tiw_site_url");
/*function to return the current site url */
function tiw_site_url($url)
{
return get_bloginfo('siteurl');//return the current wp blog url
}

It overwrites,the default and returns your current blog address which is linked to the logo. Now,we change the description,i.e the text shown on moueover on the logo.For this the filter login_headertitle comes handy.we use it as following.

add_filter("login_headertitle","tiw_login_header_title");
 
/*function to return the description of the current blog*/
function tiw_login_header_title($message)
{
return get_bloginfo('description'); /*return the description of current blog */
}

So we are done with the site linking to logo and the description shown.Now,the time is for changing logo.There are several ways in which the logo can be changed. For example you can inject some css in header,using the login_head action hook.But I will use another approach.I will inject an external stylesheet into the head,containing just one line.The content of the stylesheet,say custom custom-login.css will be

#login h1 a{background:url(logo.png) no-repeat;}

Here we are simply overwriting the wordpress logo with our own logo in the plugin directory wp-customized-login.Here logo.png is your website’s logo,If you want to put a gif or jpg logo,just edit the css file,and change logo.png with the name of your logo.Here goes the code which I wrote to inject the css file.

add_action("login_head","tiw_wp_customized_login");
/*add the CSS file in the head */
function tiw_wp_customized_login()
{
$stylesheet_uri=get_bloginfo('siteurl')."/".PLUGINDIR."/".dirname(plugin_basename(__FILE__))."/custom-login.css";
echo "
";/*inject the external css file in the head */
}
Custom login page

Here is how the custom login page looks after activating the plugin.Now to change my logo with yours, just upload your logo to the /wp-content/plugins/wp-customized-login/ and rename it to logo.png(delete mine,which is packaged with the plugin)

For download link of the plugin,please check the bottom of the post.Please remember the logo must be in the plugin wp customized login’s folder,which is generally named wp-customized-login,so the folder will be normally located here /wp-content/plugins/wp-customized-login.I personally encourage theme authors to include this functionality in their themes as it is just 10-15 lines of code.Please feel free to contact me ,if you need any assistance in customizing the login.

Custom login page
Registration Page

Here are some of the images ,showing how the login,register and password retrieval page looks on my site.
Now a screen shot of registration page

And Finally a screen shot of Password retrieval page

password-reset

Download Wp Customize  Login here from wordpress official plugin repository

How to Install

For wordpress version 2.7

  1. Use wordpress plugin installer (Plugins->add new) to upload the zip file wp-login-customize.zip
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. delete logo.png from ‘/wp-content/plugins/wp-customized-login’,and upload your logo there,rename it to logo.png.
    If your logo is jpg or gif,edit custom-login.css and change the logo.png with yourlogoname.extension

For wordpress version 2.5 to 2.6.5

  1. Unzip the wp-customized-login.zip
  2. Upload folder wp-customized-login to the `/wp-content/plugins/` directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress
  4. delete logo.png from ‘/wp-content/plugins/wp-customized-login’,and upload your logo there,rename it to logo.png.
    If your logo is jpg or gif,edit custom-login.css and change the logo.png with yourlogoname.extension

Frequently Asked Questions

I want more customization,like login page colors etc,how can I do that?

Well,I have put all the required css selector there,if you are good at editing css,go ahead,edit custom-login.css,uncomment the selectors and put your styles there.It will work perfectly.
If you use firefox,get the firebug extension and check the dom of your login page,You can easily edit it.

Please feel free to leave your comments and suggestions.I promise to reply to each and every comment and query.

Copy link
Powered by Social Snap