Leave a Reply

4 comments

  1. The login form is a simple html form sending username and password to wp-login.php. This is the simplest way to create a custom login form:

    <?php
    $redirect_to = '';
    ?>
    <form name="loginform" id="loginform" action="<?php echo site_url( '/wp-login.php' ); ?>" method="post">
    <p>Username: <input id="user_login" type="text" size="20" value="" name="log"></p>
    <p>Password: <input id="user_pass" type="password" size="20" value="" name="pwd"></p>
    <p><input id="rememberme" type="checkbox" value="forever" name="rememberme"></p>
    
    <p><input id="wp-submit" type="submit" value="Login" name="wp-submit"></p>
    
    <input type="hidden" value="<?php echo esc_attr( $redirect_to ); ?>" name="redirect_to">
    <input type="hidden" value="1" name="testcookie">
    </form>
    

    Line by line:

    • $redirect_to: If you want the user redirect to a special page, insert the url here. The url will be inserted in the hidden field at the end of the formular
    • <form ... action="...">: The data has to be send to wp-login.php. This file is in the root of your WordPress installation. Create the right url with site_url() (please refer to the codex for more information about site_url()). The method has to be set to post
    • A input field for the username with id user_login
    • A input field for the password with id user_pass
    • A input field for the ‘RememberMe’ checkbox (optional)
    • A submit button
    • The hidden field if the user should be redirected after login (optional)
    • A hidden field for a testcookie (optional, but usefull)

    Create a formular and style it with css. That’s all.

    1. Create a template file within your child theme directory, let’s say login.php. Put the login form inside this file:

      <form action="" method="post">
        <div>
          User name: <input name="log" type="text" />
        </div>
        <div>
          Password: <input name="pwd" type="password" />
        </div>
        <div>
          <input type="submit" value="Login" />
          <input type="hidden" name="action" value="my_login_action" />
        </div>
      </form>
      

      Change whatever you wish, but you should leave the name attributes intact

    2. Create a functions.php file within your child theme directory, or if you have one, edit it. You will fulfill the login requests in it:

      add_action('init', function(){
      
        // not the login request?
        if(!isset($_POST['action']) || $_POST['action'] !== 'my_login_action')
          return;
      
        // see the codex for wp_signon()
        $result = wp_signon();
      
        if(is_wp_error($result))
          wp_die('Login failed. Wrong password or user name?');
      
        // redirect back to the requested page if login was successful    
        header('Location: ' . $_SERVER['REQUEST_URI']);
        exit;
      });
      
    3. Create a copy of your header.php template, put it in your child theme folder and edit it. Add this code where you want the login form to appear:

      <?php
      
       if(!is_user_logged_in()){
         get_template_part('login');
       }
      
      ?>
      
  2. Also, you can customize the original login form in your WP Theme.

    There are a few things that you can do.
    1) You can change the Wp logo :

    <?php
    //Custom logo
    function my_custom_login_logo() {
        echo '<style type="text/css">
            h1 a { background-image:url('.get_bloginfo('template_url').'/images/logo.png) !important; }
        </style>';
    }
    
    add_action('login_head', 'my_custom_login_logo');
    
    // Custom login
    
    function my_login_logo_url() {
        return get_bloginfo( 'url' );
    }
    add_filter( 'login_headerurl', 'my_login_logo_url' );
    function my_login_logo_url_title() {
        return '[url]';
    }
    add_filter( 'login_headertitle', 'my_login_logo_url_title' );
    
    ?>
    

    2) You can remove the shake of WP login:

    <?php
    
    function my_login_head() {
        remove_action('login_head', 'wp_shake_js', 12);
    }
    add_action('login_head', 'my_login_head');
    
    ?>
    

    3) Remove the login errors :

    <?php
    
    add_filter('login_errors',create_function('$a', "return null;"));
    
    ?>
    

    Important:
    Do not use all of these parts of code to functions.php. First create three of them with the names that describe the function like (ex my_custom_login_logo.php, my_login_head.php and remove_login_errors.php) and then call the 3 functions to functions.php
    e.x.
    require_once('includes/secure/my_custom_login_logo.php');
    require_once('includes/secure/my_login_head.php');
    require_once('includes/secure/remove_login_errors.php');

    includes and secure, are folders. I hope to help you. Welcome.

  3. adding codes to wp-login.php. form codes below.

        <form id="loginform" action="<?php echo site_url( '/wp-login.php' ); ?>" method="POST">
    
                                <h5><strong>ÜYE GİRİŞİ</strong>  <a href="uyeol.html"><i class="fa fa-gear"></i> ÜYELİK OLUŞTUR.</a></h5>
                                <div class="newsletter-form">
    
                                    <div class="newsletter-email">
                                        <input id="user_login" type="text" name="grs_tcno" value="" placeholder="Kullanıcı">
                                    </div>
    
                                    <div class="newsletter-zip">
                                        <input id="user_pass" type="password" name="grs_sifre" value="" placeholder="Parola">
                                    </div>
    
                                    <div class="newsletter-submit">
                                        <input id="wp-submit" type="submit" name="girisyap" value="login">
                                        <input type="hidden" value="<?php echo esc_attr( $redirect_to ); ?>" name="redirect_to">
                                          <input type="hidden" value="1" name="testcookie">
                                        <i class="icons icon-right-thin"></i>
                                    </div>
    
                                </div>