WordPress: wp_login_form how to add class name or placeholder text

Question

How can I add placeholder or CSS classes to login fields using wp_login_form?

The function wp_login_form in wp-includes/general-template.php renders the login form from an array of arguments:

$default = array(
  'echo' => true,
  ...
  ...
);

and then creates the <form>...</form>. There is no way I can add a class name to input fields or the submit button. I want to use bootstrap classes for this purpose. Currently I have to override default classes rendered by WordPress.

I don't want to do that. For example if I want to make username box to look like an input with class form-control, I have to either write additional classes in my CSS for default WP classes or take help of jQuery to remove default classes and add mine.

What is the best way to do it? wp_login_form does not have attributes set for placeholder.

In brief I need to pass the following:
1. Pass class name from outside via an array $args,
2. Pass placeholder text for input fields

Answer 1

This might be a solution, eventhough it isn't perfect.

Wordpress' functon wp_login_form() does not support changing the css class. And I would recommend not to use Javascript for changing the DOM when you do not absolutely have to.

My solution to modify the CSS class was to set the echo property to false so the function returns the result as a string. Then, use str_replace() to find the classes we want to replace and replace it with the class names we want to use.

$args = array(
    'echo' => false,
    // etc...

And now replacing the class names...

$output = wp_login_form( $args );
$output = str_replace( 'class="input"', 'class="df-input"', $output );
echo $output;

You could also convert $output into a DOMDocument() so you can replace the class names in an more elegant manner.