SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom wp login page

    I am trying to add a custom login page with a custom template (wp 3.3.2).

    I works as it should but I need to add a lost password link to the bottom of the form.
    Tried adding this after the form closing tag
    PHP Code:
    <p id="nav">
    <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a>
    </p>
    But that doesn't work.
    Any help is appreciated.

    Full template code:
    PHP Code:
    <?php
    /*
    Template Name: Custom Wordpress Login
    */
    global $user_ID;

    if (!
    $user_ID) {

        if(
    $_POST){
            
    //We shall SQL escape all inputs
            
    $username $wpdb->escape($_REQUEST['username']);
            
    $password $wpdb->escape($_REQUEST['password']);
            
    $remember $wpdb->escape($_REQUEST['rememberme']);
        
            if(
    $remember$remember "true";
            else 
    $remember "false";
            
    $login_data = array();
            
    $login_data['user_login'] = $username;
            
    $login_data['user_password'] = $password;
            
    $login_data['remember'] = $remember;
            
    $user_verify wp_signon$login_datafalse ); 
            
    //wp_signon is a wordpress function which authenticates a user. It accepts user info parameters as an array.
            
            
    if ( is_wp_error($user_verify) ) 
            {
               echo 
    $user_verify->get_error_message();
               exit();
             } else 
             {    
                echo 
    "<script type='text/javascript'>window.location='"get_bloginfo('url') ."'</script>";
                exit();
              }
        } else { 

    get_header();

    ?>
    <div id="container">
    <div id="content">
    <?php the_title(); ?>
    <div id="result"></div> <!-- To hold validation results -->
    <form name="loginform" id="loginform" action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
    <p>
    <label for="username">Username<br />
    <input type="text" name="log" id="username" class="input" value="admin" size="20" tabindex="10" /></label>
    </p>
    <p>
    <label for="user_pass">Password<br />
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
    </p>
    <p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
    <p>
    <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
    <input type="hidden" name="testcookie" value="1" />
    </p>
    </form>

    <script type="text/javascript">                          
    $("#submitbtn").click(function() {
    $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
    var input_data = $('#wp_login_form').serialize();
    $.ajax({
    type: "POST",
    url:  "<?php echo "http://" $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
    data: input_data,
    success: function(msg){
    $('.loader').remove();
    $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
    }
    });
    return false;

    });

    function wp_attempt_focus(){
    setTimeout( function(){ try{
    d = document.getElementById('user_pass');
    d.value = '';
    d.focus();
    d.select();
    } catch(e){}
    }, 200);
    }
    wp_attempt_focus();
    if(typeof wpOnload=='function')wpOnload();

    </script>

    </div>
    </div>
    <?php

    get_footer
    ();
        }
    }
    else {
        echo 
    "<script type='text/javascript'>window.location='"get_bloginfo('url') ."'</script>";
    }
    ?>

  2. #2
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it to work after playing with the code for a couple of hours.

    Working template:
    PHP Code:
    <?php
    /*
    Template Name: Custom Wordpress Login
    */
    global $user_ID;

    if (!
    $user_ID) {

        if(
    $_POST){
            
    //We shall SQL escape all inputs
            
    $username $wpdb->escape($_REQUEST['username']);
            
    $password $wpdb->escape($_REQUEST['password']);
            
    $remember $wpdb->escape($_REQUEST['rememberme']);
        
            if(
    $remember$remember "true";
            else 
    $remember "false";
            
    $login_data = array();
            
    $login_data['user_login'] = $username;
            
    $login_data['user_password'] = $password;
            
    $login_data['remember'] = $remember;
            
    $user_verify wp_signon$login_datafalse ); 
            
    //wp_signon is a wordpress function which authenticates a user. It accepts user info parameters as an array.
            
            
    if ( is_wp_error($user_verify) ) 
            {
               echo 
    "<span class='error'>Invalid username or password. Please try again!</span>";
               exit();
             } else 
             {    
                echo 
    "<script type='text/javascript'>window.location='"get_bloginfo('url') ."'</script>";
                exit();
              }
        } else { 

    get_header();

    ?>

    <div id="container">
    <div class="grid col-300"">
    <h2><?php the_title(); ?></h2>
    <div id="result"></div> <!-- To hold validation results -->
    <form id="wp_login_form" action="" method="post">
    <p>
    <label for="username">Username<br />
    <input type="text" name="username" id="username" class="text" value="" /></label>
    </p>
    <p>
    <label for"password">Password<br />
    <input type="password" name="password" id="password" class="text" value="" /></label>
    </p>
    <p>
    <label><input name="rememberme" id="rememberme" type="checkbox" value="forever" />Remember me</label>
    </p>
    <p>
    <input type="submit" id="submitbtn" name="submit" value="Login" />
    <input type="hidden" name="testcookie" value="1" />
    </p>
    </form>
    <p id="nav">
    <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a></p>

    <script type="text/javascript">                          
    $("#submitbtn").click(function() {

    $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
    var input_data = $('#wp_login_form').serialize();
    $.ajax({
    type: "POST",
    url:  "<?php echo "http://" $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
    data: input_data,
    success: function(msg){
    $('.loader').remove();
    $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
    }
    });
    return false;

    });
    function wp_attempt_focus(){
    setTimeout( function(){ try{
    d = document.getElementById('username');
    d.value = '';
    d.focus();
    d.select();
    } catch(e){}
    }, 200);
    }
    wp_attempt_focus();
    if(typeof wpOnload=='function')wpOnload(); 
    </script>

    </div>
    </div>
    <?php

    get_footer
    ();
        }
    }
    ?>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I hate to throw this out there when you're trying to roll your own, but why not use a plugin to do this for you. There are a number of them that let you customize them to match your custom design but give you custom look and feel and even added fields or functionality...?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •