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!

5 Answers 5


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 {  
        -moz-box-shadow: none; /* Firefox */  
        -webkit-box-shadow: none; /* Safari, Chrome */  
        box-shadow: none; /* CSS3 */  
    #nav {  
    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 {
        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;
    body.login p#nav a:hover {
        color: #88eb86 !important;
        text-decoration: underline;

    .login #backtoblog a {

    #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  

//// 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 */  

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.


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


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">
                    <label>Tên đăng nhập<br>
                    <input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log"></label>
                    <label>Mật khẩu<br>
                    <input type="password" tabindex="20" size="20" value="" class="input" id="user_pass" name="pwd"></label>
                <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 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>


    <?php }


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

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


} else {

    // add more or display home page 


Then you will see the better login screen.


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/


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


  • 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, 2011 at 10:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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