In this tutorial, we will learn that how to make a simple registration form which will accept the data from the user and that data will be stored in the database. We will use phpMyadmin as backend DB. To do so, just follow these steps:
Step 1:
Open function.php as we will make the shortcode which we will use in our new page later on. If you don’t know about the shortcodes in wordpress, let me give you a brief introduction about what is shortcode. “A shortcode is a small code which is being defined generally in the function.php file and then the UI can be added to any of the page. †I hope now you have a rough idea about shortcode. Now follow the next step:
Step 2:
Now you will need to add the code for making the form. For that add the following code in your opened file.
function registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
echo '
<style>
div {
margin-bottom:2px;
}
input{
margin-bottom:4px;
}
</style>
';
echo '
<form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
<div>
<label for="username">Username <strong>*</strong></label>
<input type="text" name="username" value="' . (isset($_POST['username']) ? $username : null) . '">
</div>
<div>
<label for="password">Password <strong>*</strong></label>
<input type="password" name="password" value="' . (isset($_POST['password']) ? $password : null) . '">
</div>
<div>
<label for="email">Email <strong>*</strong></label>
<input type="text" name="email" value="' . (isset($_POST['email']) ? $email : null) . '">
</div>
<div>
<label for="website">Website</label>
<input type="text" name="website" value="' . (isset($_POST['website']) ? $website : null) . '">
</div>
<div>
<label for="firstname">First Name</label>
<input type="text" name="fname" value="' . (isset($_POST['fname']) ? $first_name : null) . '">
</div>
<div>
<label for="website">Last Name</label>
<input type="text" name="lname" value="' . (isset($_POST['lname']) ? $last_name : null) . '">
</div>
<div>
<label for="nickname">Nickname</label>
<input type="text" name="nickname" value="' . (isset($_POST['nickname']) ? $nickname : null) . '">
</div>
<div>
<label for="bio">About / Bio</label>
<textarea name="bio">' . (isset($_POST['bio']) ? $bio : null) . '</textarea>
</div>
<input type="submit" name="submit" value="Register"/>
</form>
';
}
The above code will make a form with some fields specified in the above form. You can edit your entries according to the requirement of your form. Now your form is ready. Step ahead further..
Step3:
As your form is ready now you need to apply some validation on the form so that user will not submit the form without the desired data. I think I don’t need to tell you about what is validation and why we use that. So now we need to make the following two functions for validation.
first function is:
function custom_registration_function() {
if (isset($_POST['submit'])) {
registration_validation(
$_POST['username'],
$_POST['password'],
$_POST['email'],
$_POST['website'],
$_POST['fname'],
$_POST['lname'],
$_POST['nickname'],
$_POST['bio']
);
// sanitize user form input
global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
$username = sanitize_user($_POST['username']);
$password = esc_attr($_POST['password']);
$email = sanitize_email($_POST['email']);
$website = esc_url($_POST['website']);
$first_name = sanitize_text_field($_POST['fname']);
$last_name = sanitize_text_field($_POST['lname']);
$nickname = sanitize_text_field($_POST['nickname']);
$bio = esc_textarea($_POST['bio']);
// call @function complete_registration to create the user
// only when no WP_error is found
complete_registration(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}
registration_form(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}
Second function is:
function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
global $reg_errors;
$reg_errors = new WP_Error;
if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
$reg_errors->add('field', 'Required form field is missing');
}
if ( strlen( $username ) < 4 ) {
$reg_errors->add('username_length', 'Username too short. At least 4 characters is required');
}
if ( username_exists( $username ) )
$reg_errors->add('user_name', 'Sorry, that username already exists!');
if ( !validate_username( $username ) ) {
$reg_errors->add('username_invalid', 'Sorry, the username you entered is not valid');
}
if ( strlen( $password ) < 5 ) {
$reg_errors->add('password', 'Password length must be greater than 5');
}
if ( !is_email( $email ) ) {
$reg_errors->add('email_invalid', 'Email is not valid');
}
if ( email_exists( $email ) ) {
$reg_errors->add('email', 'Email Already in use');
}
if ( !empty( $website ) ) {
if ( !filter_var($website, FILTER_VALIDATE_URL) ) {
$reg_errors->add('website', 'Website is not a valid URL');
}
}
if ( is_wp_error( $reg_errors ) ) {
foreach ( $reg_errors->get_error_messages() as $error ) {
echo '<div>';
echo '<strong>ERROR</strong>:';
echo $error . '<br/>';
echo '</div>';
}
}
}
Step 4:
With above two functions, your form is ready with all the validations for required fields, email etc. Now you need to make another function for completing the form and insert the data into database as user entry. To do so, copy and paste the following code:
function complete_registration() {
global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
if ( count($reg_errors->get_error_messages()) < 1 ) {
$userdata = array(
'user_login' => $username,
'user_email' => $email,
'user_pass' => $password,
'user_url' => $website,
'first_name' => $first_name,
'last_name' => $last_name,
'nickname' => $nickname,
'description' => $bio,
);
$user = wp_insert_user( $userdata );
echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login>.';
}
}
Step 5:
Your form is ready. Now add the last line to your function.php file which we will use latter in our page.
// Register a new shortcode: [cr_custom_registration]
add_shortcode('myregister', 'custom_registration_shortcode');
// The callback function that will replace [book]
function custom_registration_shortcode() {
ob_start();
custom_registration_function();
return ob_get_clean();
}
Step 6:
All set. Now just make a new page and then copy and paste the following short-code there:
[myregister]
Now save your page and test it yourself.
If you have any query regarding the code or any concept, feel free to contact me or comment the post.