WordPress Snippet #2: Style the login page

21 Responses to “WordPress Snippet #2: Style the login page”

RSS feed for comments on this post.

1. 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

2. Mike Jolley says:

   

   @John Nixon: Thanks, that’s nice to hear

   Comment made on September 21, 2009 at 10:00 pm

3. 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

4. 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

5. 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

6. 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

7. BigM75 says:

   

   very great things, nice artikle

   Comment made on December 22, 2009 at 1:02 am

8. 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

9. Mike Jolley says:

   

   @meme: functions.php – plural.

   Comment made on December 28, 2009 at 6:55 pm

10. 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

11. 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

12. 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

13. gofree says:

    

    Very appreciated your reply. Could we have the sample .css file, please?

    Comment made on December 30, 2009 at 3:53 am

14. 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

15. 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

16. 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

17. 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

18. Bond!tsch says:

    

    buena causa y bajo ciertas circunstancias ser útil sigue así

    Comment made on April 22, 2010 at 4:48 pm

19. drummer says:

    

    Nice code! Thanks!

    Comment made on May 4, 2010 at 1:16 pm

20. Ningbo Airport says:

    

    Great article and also great comments!!!
    THANK YOU Mike and also thanks to readers who posted comments (especially Brian H).
    With all these elements, even a beginner can easily customize his own login logo.
    Keep up the good work!!
    Jeffrey

    Comment made on June 2, 2010 at 3:50 pm

21. Jay Collier says:

    

    The code appears to not work with 3.0 multisite. I’m still hoping to learn how to configure this correctly. It looks great.

    Comment made on July 12, 2010 at 6:48 pm

The comments are closed.