Wordpress Snippet #2: Style the login page
The Wordress Snippets series of posts will give you some useful code snippets for use in your projects – just copy and paste (but try to understand how they work!).
This snippet will add a stylesheet to your login page so that you can style it fully, and also change the default Wordpress logo link (to wordpress.org) and title text to something of your choosing. Add it to functions.php in your template.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function custom_loginpage_logo_link($url) { // Return a url; in this case the homepage url of wordpress return get_bloginfo('wpurl'); } function custom_loginpage_logo_title($message) { // Return title text for the logo to replace 'wordpress'; in this case, the blog name. return get_bloginfo('name'); } function custom_loginpage_head() { /* Add a stylesheet to the login page; add your styling in here, for example to change the logo use something like: #login h1 a { background:url(images/logo.jpg) no-repeat top; } */ $stylesheet_uri = get_bloginfo('template_url')."/css/login.css"; echo '<link rel="stylesheet" href="'.$stylesheet_uri.'" type="text/css" media="screen" />'; } // Hook in add_filter("login_headerurl","custom_loginpage_logo_link"); add_filter("login_headertitle","custom_loginpage_logo_title"); add_action("login_head","custom_loginpage_head"); |
How it works
We simply use the wordpress hooks on the login page (custom_loginpage_logo_link, custom_loginpage_logo_title, custom_loginpage_head) to insert our code and modify the existing title text and link to something of our own.
Found this post useful? Why not buy me a coffee!
John Nixon says:
I just want to say you rock and I will be making donation(s). Please, keep up the good work. I am a fan.
Comment made on September 21, 2009 at 5:51 pm
Mike Jolley says:
@John Nixon: Thanks, that’s nice to hear
Comment made on September 21, 2009 at 10:00 pm
David Zemens says:
Great information Mike. I have made a custom graphic for my clients login page, but once they did an update to WordPress it was always overwritten. This snippet solves that problem. Thanks very much.
Comment made on October 9, 2009 at 4:15 am
araneum says:
How you put image URL? Relative URL or full URL with http://www.
I have to replace wordpress login logo under image folder at wp-admin directory with my logo for my logo to show up properly in login page.
Thx
Comment made on October 15, 2009 at 8:56 am
Mike Jolley says:
@araneum: Full url. If you follow the above instructions exactly it will work.
Comment made on October 15, 2009 at 9:23 am
Andy Fitzpatrick says:
This is brilliant we were just discussing how to change this page many thanks
Comment made on October 20, 2009 at 12:09 pm
BigM75 says:
very great things, nice artikle
Comment made on December 22, 2009 at 1:02 am
meme says:
hi
thanks for the code
but i really have problem on making it work
where exactly should i place the code, i tried put it on the function.php but that’s not working
should i replace an exciting code with this or what
pleeeease help me on this and tell more details , i really need it
Comment made on December 25, 2009 at 12:45 pm
Mike Jolley says:
@meme: functions.php – plural.
Comment made on December 28, 2009 at 6:55 pm
gofree says:
So we only need to modify this:
// Hook in
add_filter(“login_headerurl”,”custom_loginpage_logo_link”);
add_filter(“login_headertitle”,”custom_loginpage_logo_title”);
add_action(“login_head”,”custom_loginpage_head”);
we put all code in between php?
Comment made on December 29, 2009 at 10:54 am
gofree says:
Looking through, still can’t get a scope of modifying. Can you show sample modifying?
It seems that not to modify the above code, but just copy and paste then create .css named it login.css in the template folder. Am I right?
Again, please sample the css, plz.
Comment made on December 29, 2009 at 11:11 am
Mike Jolley says:
@gofree: Aside from copying and pasting that code into your themes functions.php file all you have to do is make a /css/login.css in your themes template folder.
Comment made on December 29, 2009 at 2:59 pm
gofree says:
Very appreciated your reply. Could we have the sample .css file, please?
Comment made on December 30, 2009 at 3:53 am
Mike Jolley says:
@gofree: I cannot give you the css, but if for example you wanted to change the logo you could use:
#login h1 a {
background:url(images/logo.jpg) no-repeat top;
}
For further CSS help I would recommend looking at W3Schools.
Comment made on December 30, 2009 at 4:15 pm
Brian Hinson says:
Hi everyone, I saw some asking for help, and I was a little confused at firs, but it works as advertised. Here is how I used it.
1. I copy the above code, all of the above code and put into the functions.php file, the code goes between the php begin and end marks ().
2. You need to make a graphic to replace the original one. It is 326px wide by 67px high. I made my own.
3. in your wordpress theme directory (of the theme you are using), create a css folder (directory, same thing). You may already have one. In that directory make a login.css file. Put your custom css in there. Here is my own custom css to make my page “look right”.
html,
body.login { background-color: #bbb;}
#login h1 a { background: #bbb url(‘../images/header/login.png’) no-repeat top center;}
#login .message { background-color: #ccc; border: 1px solid black; display:none;}
#login form { border: 1px solid black; background-color: #ccc;}
#login label {color: #111;}
#login input {border: 1px solid #999;}
.login #login p#nav a:link,
.login #login p#nav a:visited,
.login #login p#nav a:hover,
.login #login p#nav a:active {color: #111 !important}
I hope this really helps those who are having trouble.
Comment made on January 8, 2010 at 8:26 pm
Brian Hinson says:
Oh, and you’ll notice that in my above comment, I set #login .message to display:none; This will keep that message from displaying at all!!! Just remove that style, and it will show as normal. I really didn’t need that message for my purposes.
Comment made on January 8, 2010 at 8:29 pm
Mau says:
Thank you Brian, this code is great and your explanation makes it work ok, especially for those that are not wp-skilled like myself.
Comment made on January 9, 2010 at 7:47 pm