Change the login button on the login page

Question

I would like to be able to change the text on the Log In button in wp-login.php - however, it's a bit more complicated than that. I want to be able to change it in the theme, rather than editing the core file directly, so that a) It doesn’t get overwritten when WordPress updates, and b) It'll transfer over if I distribute my theme at all.

I don't know if that's possible. All I can find on the internet is how to change the CSS of the login page, not the actual HTML/PHP.

Answer 1

The "Log In" string is passed to the translation function, and you can filter that. To prevent needing to filter every little string, you can activate this filter right before the login form is printed.

add_action( 'login_form', 'wpse17709_login_form' );
function wpse17709_login_form()
{
    add_filter( 'gettext', 'wpse17709_gettext', 10, 2 );
}

function wpse17709_gettext( $translation, $text )
{
    if ( 'Log In' == $text ) {
        return 'WPSE 17709 Logging In!';
    }
    return $translation;
}

Answer 2

To supplement what has already been said by Jan Fabry, follows the same function with all terms of the login panel:

add_filter( 'gettext', 'wpse17709_gettext', 10, 2 );
function wpse17709_gettext( $custom_translation, $login_texts ) {

    // Login Main Page
    if ( 'Username' == $login_texts ) { return ''; } // Username Label
    if ( 'Password' == $login_texts ) { return ''; } // Password Label
    if ( 'Remember Me' == $login_texts ) { return ''; } // Remember Checkbox
    if ( 'Log In' == $login_texts ) { return ''; } // Login Button
    if ( 'Lost your password?' == $login_texts ) { return ''; } // Lost Password Link
    if ( '← Back to %s' == $login_texts ) { return ''; } // Back to website

    // Login New Password
    if ( 'Please enter your username or email address. You will receive a link to create a new password via email.' == $login_texts ) { return ''; } // Message after logo
    if ( 'Username or E-mail:' == $login_texts ) { return ''; } // Label of username input
    if ( 'Log in' == $login_texts ) { return ''; } // Log In Link Text
    if ( 'Get New Password' == $login_texts ) { return ''; } // Button

    // Messages
    if ( 'You are now logged out.' == $login_texts ) { return ''; } // Log out message
    if ( 'User registration is currently not allowed.' == $login_texts ) { return ''; } // User registration disabled
    if ( 'Check your e-mail for the confirmation link.' == $login_texts ) { return ''; } // Check link confirmation on email
    if ( 'Check your e-mail for your new password.' == $login_texts ) { return ''; } // Check new password on email
    if ( 'Registration complete. Please check your e-mail.' == $login_texts ) { return ''; } // Registration complete
    if ( 'Your session has expired. Please log-in again.' == $login_texts ) { return ''; } // Expired Session
    if ( '<strong>You have successfully updated WordPress!</strong> Please log back in to experience the awesomeness.' == $login_texts ) { return ''; } // Sucessfully Wordpress Updated

    return $translation;

}

Answer 3

By default, this is styled in the core of WP in the login.css and colors-fresh.css

You could always copy this into you theme's CSS

input.button-primary, button.button-primary, a.button-primary {
border-color: #298CBA;
font-weight: bold;
color: white;
background: #21759B url(../images/button-grad.png) repeat-x scroll left top;
text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
}

And make the changes you'd like to see and simply add the !important to the ones that are different. Like

input.button-primary, button.button-primary, a.button-primary {
border-color: #000 !important;
font-weight: normal !important;
color: orange !important;
text-shadow: none !important;
}

As far as changing the 'text' of the button, that's part of the WP core file and would be over written each time you updated and would not be transferred from site to site.

There's a couple of plugins that might help with customizing your login page a little more.

BM Custom Login
Custom Login

Answer 4

Just replace "login" button with an image in logins.css

Answer 5

function oz_login_head() {

    function oz_login_label( $translated_text, $text, $domain ) {
        if ( 'Log In' === $text ) {
            $translated_text = __( 'Your Custom Text' , 'divi' );
        }
        return $translated_text;
    }
    add_filter( 'gettext', 'oz_login_label', 20, 3 );

}

add_action( 'login_head', 'oz_login_head' );

Answer 6

Modify the input 'value' with jQuery:

<script>
    $("#wp-submit").function(){
        $(this).attr('value', 'new_value');
    });
</script>

Include the script in the login_head:

function change_login_button() {
    echo '<script src="link_to_script.js"></script>';
}
add_action('login_head', 'change_login_button');