Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

My question is how do I customize the default WordPress login and register page without editing WP's core files. I'm thinking more along the lines of a functions.php code.

Can anyone help me out by finding a tutorial or something? Remember, I don't want to edit the WP core files. Thanks!

share|improve this question

5 Answers 5

up vote 5 down vote accepted

Here's my functions.php that you can copy the functions. My CSS is admittedly thrown together fast and could be neater. I'm in a hurried launch phase right now. But you can use the functions. The first adds css to your head of the login page to override the styles. The later two functions change the url and title attribute of the logo link.

// LOGIN - custom style  
function my_login_style() {  
    echo '  
    #login {  
        background:none;  
        border:0;  
        box-shadow:0;  
        -moz-box-shadow: none; /* Firefox */  
        -webkit-box-shadow: none; /* Safari, Chrome */  
        box-shadow: none; /* CSS3 */  
        }  
    #nav {  
        background:none;  
        }  
    form {  
        -moz-box-shadow: 0 4px 18px #0b0b0b;  
        -webkit-box-shadow: 0 4px 18px #0b0b0b;
        box-shadow: 0 4px 18px #0b0b0b;
        }

    #login form#loginform, #login form#registerform, #login form#lostpasswordform {
        border: 1px solid #fff;
        }

    #login h1 {
        margin-bottom: 10px;
        }

    #login h1 a {
        width:300px;
        height:85px;
        margin: 0 auto 31px;
        }

    #login form#loginform #user_login, #login form#loginform #user_email, #login form#registerform #user_login, #login form#registerform #user_email, #login form#lostpasswordform #user_login, #login form#loginform #user_pass, #login form#loginform #openid_identifier   
        {  
        border: 1px solid #aaa;  
        }  

    #login form .submit input {  
        background: #2bab44 url("zhttp://www.domain.com/site/themes/mytheme/img/login-button-gradient8.png") left top repeat-x !important;   
        border: 1px solid #008717 !important;  
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);  
        padding: 5px 20px;  
        }  

    #login form .submit input:hover {   
        background: url("http://www.my.com/site/themes/my/img/login-button-gradient7.png") left -24px repeat-x !important;   
        border: 1px solid #2b8c35 !important;  
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);  
        }  

    #login form .submit input:active {
        padding: 5px 20px; /*reqd here for some reason */
        }

    body.login p#nav a {
        color: #888 !important;
        text-shadow:none;
        font-weight:normal;
        letter-spacing:0;
        }
    body.login p#nav a:hover {
        color: #88eb86 !important;
        text-decoration: underline;
        }   

    .login #backtoblog a {
        display:none;
        }

    #login #login_error {
        font-size: 13px;
        font-weight: normal;
        text-shadow: none;
        margin: -11px auto 0;
        padding: 12px;
        width: 275px;
        background: #ffb5b4;
        border: 1px solid #db5858;
        -moz-border-radius: 10px !important;
        border-radius: 5px;
        }   

    #login .message {
        font-weight: normal;
        color: #bbb;
        text-shadow: none;
        }
    #user_pass, #user_login, #user_email {
        background: #fff;   
        }   
    ';
    }
    add_action('login_head', 'my_login_style');

//// LOGIN - function to change link of logo on login page  
function my_login_custom_site_url($url) {  
    return get_bloginfo('siteurl'); //return the current wp blog url  
    }  
    add_filter("login_headerurl","my_login_custom_site_url");  

//// LOGIN - function to change link title of logo on login page (remove's WordPress' slogan)  
function my_login_header_title($message) {  
    return False; /*return the description of current blog */  
    }  
    add_filter("login_headertitle","my_login_header_title");  
share|improve this answer

You can use the add_action function to add on to the login function without having to edit the WP Core.

Here is a tutorial to show you how to create your custom wordpress login: http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/

There is also plugins out there that can create custom wordpress logins, but I feel they cannot achieve the same level of customization as this one.

share|improve this answer

Good answers here: How do I change the logo on the login page?

share|improve this answer

I think this code is better:

function login() {

    if( is_user_logged_in() ) {

        echo 'Bạn đã đăng nhập rồi ! có thể bạn muốn <a href="' . wp_logout_url( home_url() ) . '">đăng xuất</a> ?';

    } else { ?>

        <div id="login">

            <form method="post" action="<?php echo wp_login_url(); ?>" id="loginform" name="loginform">
                <p>
                    <label>Tên đăng nhập<br>
                    <input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log"></label>
                </p>
                <p>
                    <label>Mật khẩu<br>
                    <input type="password" tabindex="20" size="20" value="" class="input" id="user_pass" name="pwd"></label>
                </p>
                <p class="forgetmenot"><label><input type="checkbox" tabindex="90" value="forever" id="rememberme" name="rememberme"> Tự động đăng nhập lần sau</label></p>
                <p class="submit">
                    <input type="submit" tabindex="100" value="Đăng nhập" class="button-primary" id="wp-submit" name="wp-submit">
                    <input type="hidden" value="<?php bloginfo( 'url' )?>" name="redirect_to">
                    <input type="hidden" value="1" name="testcookie">
                </p>
            </form>

            <p id="nav"><?php wp_register( '', '' ); ?> | <a title="Tạo mật khẩu mới" href="<?php echo wp_lostpassword_url() ?>">Bạn quên mật khẩu?</a></p>

        </div>

    <?php }

}

And now add this code to header.php in your template:

if( $_GET['msv'] == 'login' ){

    login();
    get_sidebar();
    get_footer();

} else {

    // add more or display home page 

}

Then you will see the better login screen.

share|improve this answer

Here is a thorough tutorial published recently by some very knowledgeable WP developers: http://digwp.com/2010/12/login-register-password-code/

Demo: http://digwp.com/custom-login-demo/


Update

One of the core WP devs just published this tutorial on customizing your log-in screen logo:

http://markjaquith.wordpress.com/2011/02/01/customized-wordpress-login-screen/

share|improve this answer
    
Though it might be worth noting the XSS concerns raised by one of the users who commented on that article(which has yet to be addressed). –  t31os Jan 28 '11 at 10:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.