2

I am customizing the login form to more closely resemble Google's minimalist form, which has no form labels, and instead relies on placeholders to prompt users for the input fields. The form starts out looking like this:

    <p>
        <label for="user_login">Username<br />
        <input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
    </p>

WordPress has no method to insert placeholders in the login, but I found a simple jQuery solution for doing that here.

When you call for the WordPress login in your own form, you can pass values to override the defaults as described in the Codex. Placing empty values in your arguments will remove the relevant label, e.g.:

    <?php
        $args = array(
            'label_username' => __( '' ),
            'label_password' => __( '' ),
            'label_log_in'   => __( 'Sign In' ),
        );
     ?>
    <?php wp_login_form( $args ); ?>

This usage will cleanly remove the label and the <br /> tag following the label, so it looks like this:

    <p class="login-username">
        <label for="user_login"></label>
        <input type="text" name="log" id="user_login" class="input" value="" size="20" />
    </p>

However, the WordPress default login page values (e.g. the page at /wp-login.php) seemingly cannot be modified since it is not called by your own function.

I found a method for changing the labels in the default form, offered by a stack user here. This method can be modified to remove the labels, as I did thusly:

    function empty_login_labels() {
        add_filter( 'gettext', 'username_change', 20, 3 );
        function username_change( $translated_text, $text, $domain ) 
        {
            if (preg_match("/Username|Password/", $text)) {
                $translated_text = '';
            }
            return $translated_text;
        }
    }
    add_action( 'login_head', 'empty_login_labels' );

Unfortunately, possibly because the filter is applied later in the process, WordPress has already added <br /> tags after the (now empty) labels:

    <p>
        <label for="user_login"><br />
        <input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
    </p>

NOTE - I just noticed that WordPress formats these two forms slightly differently - the label in the default form contains the input field, while in the user called function (wp_login_form()) the label container is closed before the input field. Probably not germane to this issue, but will explain why code snippets look different

I could style around the extra <br> tag with CSS, but that's problematic. Is there a way to remove this <br /> tag or at least get an identifier into it to deep-six it with css?

3

Thanks to @dalbaeb for pointing me in the right direction - I didn't realize you could target a label element with its attribute value. The resulting style for targeting the <br> tag after the label is so:

label[for=user_login] > br, label[for=user_pass] > br
{
    display: none;
}

MDN documentation for attribute selectors can be found here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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