How to add custom fields to my custom registration form

Question

I´m trying to add first name, last name, and company name to my custom registration page. The registration form almost works, but there is a problem.

So far I´ve got the following code, but I can't get the first name, last name, and company name registered. Can anyone help me out please?

<?php if(!is_user_logged_in()) { ?>


<?php
if(get_option('users_can_register')) {
//Check whether user registration is enabled by the administrator
?>

<?php

if($_POST)

    {
    //We shall SQL escape all inputs
    $username = $wpdb->escape($_REQUEST['username']);
    if(empty($username)) {
        echo "ERROR... please type username";
        exit();
    }
    $email = $wpdb->escape($_REQUEST['email']);
    if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email)) {
        echo "ERROR... please valid email";
        exit();
    }
    $first_name = $wpdb->escape($_REQUEST['first_name']);
    if(empty($first_name)) {
        echo "ERROR... please add first name";
        exit();
    }
    $last_name = $wpdb->escape($_REQUEST['last_name']);
    if(empty($last_name)) {
        echo "ERROR... please add last name";
        exit();
    }
    $companyname = $wpdb->escape($_REQUEST['companyname']);
    if(empty($companyname)) {
        echo "ERROR... please add company name";
        exit();
    }





    $pass1 = $wpdb->escape($_REQUEST['pass1']);
$pass2 = $wpdb->escape($_REQUEST['pass2']);
if ($pass1 != $pass2){
    echo "ERROR... password's does'nt mach";
        exit();

}
$random_password = $pass1;
    $status = wp_create_user( $username, $random_password, $email );
    if ( is_wp_error($status) )
        echo "ERROR... username allready exist's";
    else {
        $from = get_option('admin_email');
        $headers = 'Fra: '.$from . "\r\n";
        $subject = "Registreringen er fullført";
        $msg = "Hi, you are now registered. Here is your username and password:\n\n$username\n$random_password";
        wp_mail( $email, $subject, $msg, $headers );
        echo "Thank you for registering. You can now log inn.";
    }

    exit();

} else {
//Embed the register form and javascript here

?>


<div id="result"></div>


<form id="wp_signup_form" action="" method="post">

<div>
<strong>Username:</strong><br />
<input type="text" name="username" style="width:350px; margin-bottom:3px;"><br />
</div>

<div>
<strong>First name:</strong><br />
<input type="text" name="first_name" id="first_name" style="width:350px; margin-bottom:3px;"><br />
</div>

<div>
<strong>Last name:</strong><br />
<input type="text" name="last_name" id="last_name" style="width:350px; margin-bottom:3px;"><br />
</div>

<div>
<strong>Companyname:</strong><br />
<input type="text" name="companyname" id="companyname" style="width:350px; margin-bottom:3px;"><br />
</div>

<div>
<strong>E-mail</strong><br />
<input type="text" name="email" style="width:350px; margin-bottom:3px;"><br />
</div>

<div>
<strong>Password:</strong><br />
<input id="password" class="input" type="password" value="Passord" name="pass1" style="width:350px; margin-bottom:3px;" /><br />
</div>
<div>
<strong>Repeat password:</strong><br />
<input id="repeat_password" class="input" type="password" name="pass2" style="width:350px; margin-bottom:3px;" /><br />
</div>

<input type="submit" id="submitbtn" name="submit" value="Register" class="knapp" style="padding:8px;">
</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_signup_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;

});
</script>
<?php
// embedded

}
?>

<?php
    }

else 
?>

<!-- regskjema end -->
<br />
<?php } else { ?>
You are allready registered and logged inn. <a href="<?php bloginfo('url'); ?>/profilside">Click here</a> to load your profilepage.
<?php } ?>

Answer 1

There's wp_login_form() for such cases. It offers tons of hooks to extend it.

// In your template
wp_login_form( array( /* Args: refer to Codex page */ ) );

A more in-depth look at the filters, can be found here @GitHub WP Core source.

• 'login_form_top' - above login-username
• 'login_form_middle' - above login-submit
• 'login_form_bottom' - below login-submit

My personal suggestion is: Don't use an AJAX login form. It's hard to maintain, much easier to hack (in some cases) and will be a pain, when there're other parts on the page, that show logged-in/visitor information, as you'll have to maintain all your login forms on-the-fly UI updates with every change on the page.

If you still want to do the whole thing with AJAX, then I'd suggest to register an event listener/handler to id_submit (the arg that is used in the template tag above). There you can easily return false; or use event.preventDefault(); to disable the redirection and roll your own registration (copy core).