Need some help figuring this out, im creating a cusom login

HI,

Need some help figuring this out, im creating a cusom login using #modal , the login works fine etc.. but what i need is to change the default wordpress login css to a my theme css. here's what i have so far.

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

                        if(isset($_GET['login']) && $_GET['login'] == 'failed')
                        {
                            ?>
                                <div id="login-error" style="background-color: #FFEBE8;border:1px solid #C00;padding:5px;">
                                    <p>Login failed: You have entered an incorrect Username or password, please try again.</p>
                                </div>
                            <?php
                        }

                        wp_login_form( $args );

but i wish to custom css the input field , button and add a place-holder instead. is that possible.

Here's my html login form that i wished to incorporate it in.

<form action="#" name="loginform" class="push-down-15">
                        <div class="form-group">
                            <input type="text" id="username" required="true" class="form-control  form-control--contact" placeholder="Username">
                        </div>
                        <div class="form-group">
                            <input type="text" id="subject" required="true"  class="form-control  form-control--contact" placeholder="Password">
                        </div>
                        <button type="submit" class="btn  btn-primary">SIGN IN</button>
                    </form>

Thanks for the help.

  • Patrick

    Hi there @Thomas Whittaker

    I hope you're having a great day!

    I'm a bit confused as I see you have already specified the placeholders in the form HTML. Is there somewhere else you wanted a placeholder?

    As for adding custom CSS, I think it would be easier to simply add that to your style-sheet or a custom CSS plugin. You already have your form class defined, so you can use that to targate the specific elements inside, like so:

    .push-down-15 input[type="text"] {your-styles-here}
    .push-down-15 button {your-styles-here}

    Please let us know if this helps, and don't hesitate to post again if you need to.

  • Tom Whittaker

    Hi there,

    This code below is what i want to replace it with it, currently as you can see on the code above i used wp_login_form( ); and pass $args as an argument. instead of using the wordpress default css that load when i call wp_login_form(). i wanted to use the outline that i have below for the wp_login_form().

    <form action="#" name="loginform" class="push-down-15">
                            <div class="form-group">
                                <input type="text" id="username" required="true" class="form-control  form-control--contact" placeholder="Username">
                            </div>
                            <div class="form-group">
                                <input type="text" id="subject" required="true"  class="form-control  form-control--contact" placeholder="Password">
                            </div>
                            <button type="submit" class="btn  btn-primary">SIGN IN</button>
                        </form>
  • Sajid

    Hi @Thomas Whittaker

    Hope you are doing good today :slight_smile:

    If you completely want to use your own HTML for login form then I suggest you to create your login form instead of calling the function.

    Here is a great write from pippins, that would help you create you own front end login form from scratch with step by step guide.
    https://pippinsplugins.com/creating-custom-front-end-registration-and-login-forms/

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.