Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

3 Answers 3

up vote 6 down vote accepted
  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');
     }
    
    ?>
    
share|improve this answer
    
I absolutely love this example. What would I have to write for the same thing but a register form instead of $result = wp_signon(); ? –  Andrei Cristian Prodan May 31 '13 at 9:33
1  
wp_create_user –  onetrickpony May 31 '13 at 10:11

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.