5

I am very new to WordPress. I am trying to display a login form in the header section of my website. However, when I look at all of the files in my directory it is very overwhelming and I am afraid to touch anything.

Does anyone know of any good tutorials on the topic or perhaps shed some light on the issue?

9

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.

7
  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.

0

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>
  • There is never a good hint to edit the core files! – bueltge Jan 2 at 13:37

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.