Placeholder for custom WordPress login form

Many of you are familiar with WordPress and with its login page wp-login.php. There is nothing wrong with it, the form works fine and it does what it’s supposed to do.

But for many reasons developers wants to change it, the most commune one is to have a different style for it, so the login / register form will look much like the theme design and will no confuse visitors. After all, if a hook exists for that, it means that there is nothing wrong customizing it.

If you want to have a custom login form on your WordPress website than you will have to google “custom WordPress login form”, there are a lot of tutorial around the web to help you achieve that.

On this post I’m not going to do a tutorial on how to have a custom WordPress login form but I’m going to show how add placeholder on WordPress login form and how is the right way to do it.

The default usage of wp_login_form() function is as below:

$args = array(
	'echo'           => true,
	'remember'       => true,
	'redirect'       => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
	'form_id'        => 'loginform',
	'id_username'    => 'user_login',
	'id_password'    => 'user_pass',
	'id_remember'    => 'rememberme',
	'id_submit'      => 'wp-submit',
	'label_username' => __( 'Username' ),
	'label_password' => __( 'Password' ),
	'label_remember' => __( 'Remember Me' ),
	'label_log_in'   => __( 'Log In' ),
	'value_username' => '',
	'value_remember' => false
);

Let’s say that we want a custom login form which shows only username and password on top of page, like the one illustrated on the image below:

WordPress login form with placeholder

In a similar case the WordPress login form function will be like the on below:

<div id="my-login-form">
<?php if ( ! is_user_logged_in() ) { ?>
 <?php $args = array(
    'remember'     => false,
    'form_id'      => 'my-top-bar-form',
    'id_submit'    => 'my-submit-login',
    'label_log_in' => __( '›' ),
    'id_username'  => 'my-user',
    'id_password'  => 'my-pass',
 );
 wp_login_form( $args ); ?>
 <?php if ( get_option( 'users_can_register' ) ) : ?>
   <a class="button pe-register" href="<?php bloginfo( 'wpurl' ); ?>/wp-login.php?action=register"><?php _e( 'Register', 'SHOMTek' ) ?></a>
 <?php endif; ?>
 <?php } elseif ( is_user_logged_in() ) { ?>
   <a class="button pe-logout" href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php _e( 'Logout', 'SHOMTek' ) ?></a><?php } ?></div>

Now if we put this code somewhere on our WordPress theme files like header.php it will generate the custom login form, of course you will have to put it in the right place where you will want the form to be showed.

After showing the form we will have to add some css styles for it and hide the username and password label.

#my-login-form #my-top-bar-form p.login-username label,
#my-login-form #my-top-bar-form p.login-password label {
  display: none;
}

Now that we have hidden labels we will need to have placeholders otherwise the form will make no sense. There is no build in hook for doing that on WordPress but we will have to do it by using jQuery

Supposing that we have a script on our theme named theme.js, what we are going to do first is to find the WordPress function used to enqueue the script and modify it to add localize support for our form placeholder.

if( !function_exists('load_theme_scripts') ){
  function load_theme_scripts(){
    wp_register_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), $theme->get( 'Version' ), true); // register theme.js script
    // add localize support for our placeholder
    $translation_placeholder = array(
      'usernamePlaceholder' => __( 'Username', 'SHOMTek' ), // variable for username placeholder
      'passwordPlaceholder' => __( 'Password', 'SHOMTek' ), // variable for password placeholder
    );
    wp_localize_script( 'theme_js', 'placeHolderForTopBar', $translation_placeholder ); // hook wp_localize_script

    wp_enqueue_script( 'theme_js' ); // load our theme.js script
  }
}
add_action( 'wp_enqueue_scripts', 'load_theme_scripts' );

Remember, if you want the localize support to work you will need to register script before than enqueue it because if you will enqueue it without registering before the localize support will not work

Now that we have added localize support for our placeholders the next thing to do is adding to lines on our theme.js file as below:

(function ($) {
  "use strict";
  $(document).ready(function () {
    $('#my-user').attr('placeholder', placeHolderForTopBar.usernamePlaceholder);
    $('#my-pass').attr('placeholder', placeHolderForTopBar.passwordPlaceholder);
  });
})(jQuery);

Everything is ready. We have custom WordPress login form with placeholders done in the right way, supporting localize as well.

Happy coding!

Exit mobile version