Wordpress Web Application Development（Third Edition）

上QQ阅读APP看书，第一时间看更新

Designing the registration form

We need to design a custom form for frontend registration containing the default header and footer. The whole content area will be used for the registration and the default sidebar will be omitted for this screen. Create a PHP file called register-template.php inside the templates folder with the following code:

    <?php global $wpwaf_registration_params;     
          if(is_array($wpwaf_registration_params)){ 
            extract($wpwaf_registration_params); 
          }  
         get_header(); ?> 
    <div class='wpwaf-registration-form-header' ><?php echo     __('Register New Account','wpwaf'); ?></div> 
       <div id='wpwaf-registration-errors'> 
         <?php 
           if( isset($wpwaf_registration_params['errors']) &&     count($wpwaf_registration_params['errors']) > 0) { 
            foreach ( $wpwaf_registration_params['errors'] as $error ) { 
              echo '<p class="wpwaf_frm_error">' . $error . '</p>'; 
            } 
           } 
         ?> 
    </div>  
    HTML Code for Form 
    </div> 
    <?php get_footer(); ?>

We can include the default header and footer using the get_header and get_footer functions, respectively. After the header, we will include a display area for the error messages generated in registration. More about the errors and usage of $wpwaf_registration_params will be discussed later in this section. Then, we have the HTML form, as shown in the following code:

    <form id='wpwaf-registration-form' method='post' action='<?php echo 
     get_site_url() . '/user/register'; ?>'> 
      <ul> 
        <li> 
          <label class='wpwaf_frm_label'><?php echo 
     __('Username','wpwaf'); ?></label> 
          <input class='wpwaf_frm_field' type='text' 
     id='wpwaf_user' name='wpwaf_user' value='' /> 
        </li> 
       <li> 
          <label class='wpwaf_frm_label'><?php echo __('E-
     mail','wpwaf'); ?></label> 
          <input class='wpwaf_frm_field' type='text' 
     id='wpwaf_email' name='wpwaf_email' value='' /> 
        </li> 
        <li> 
          <label class='wpwaf_frm_label'><?php echo __('User 
     Type','wpwaf'); ?></label> 
          <select class='wpwaf_frm_field' name='wpwaf_user_type'> 
            <option value='wpwaf_premium_member'><?php echo __('Premium     Member','wpwaf'); ?></option> 
            <option value='wpwaf_free_member'><?php echo __('Free     Member','wpwaf'); ?></option>                 
          </select> 
        </li> 
        <li> 
          <label class='wpwaf_frm_label' for=''>&nbsp;</label> 
          <input type='submit' name='wpwaf_reg_submit' value='<?php echo 
     __('Register','wpwaf'); ?>' /> 
        </li> 
      </ul> 
    </form>

As you can see, the form action is set to a custom route called user/register to be handled through the front controller. Also, we have added an extra field called user type to choose the preferred user type on registration.

You might have noticed that we used wpwaf as the prefix for form element names and element IDs, as well as CSS classes. Even though it's not a must to use a prefix, it can be highly effective when working with multiple third-party plugins. A unique plugin-specific prefix avoids or limits conflicts with other plugins and themes.

We will get a screen similar to the following one, once we access the /user/register link in the browser:

Once the form is submitted, we have to create the user based on the application requirements.