Cómo crear un formulario de registro personalizado en WordPress

En entradas anteriores hemos visto cómo crear formularios de log-in / log-out personalizados, y cómo agregar campos personalizados al perfil de usuario de WordPress tanto en el front-end como en el back-end.

Para terminar esta serie de entradas vamos a ver ahora cómo crear un formulario de registro personalizado en el front-end. Para ello crearemos un form, donde además de solicitar el nombre de usuario e e-mail, pediremos los campos personalizados que vimos en ejemplos anteriores: población, provincia y teléfono. Una vez validado el formulario registraremos al usuario utilizando la función: wp_insert_user().

El html para pintar el formulario es el siguiente:

<form method="post" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
  <div class="login-form">
    <div class="form-group">
      <label for="user">Usuario:</label><br />
      <input type="text" id="user" name="user" class="form-control" value="<?php echo isset($_POST['user']) ? $_POST['user'] : null;?>" placeholder="Usuario" required aria-required="true" />
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" class="form-control" value="<?php echo(isset($_POST['email']) ? $_POST['email'] : null); ?>" placeholder="Email" required aria-required="true" />
    </div>
    <div class="form-group">
      <label for="town">Población</label>
      <input type="text" id="town" name="town" class="form-control" value="<?php echo(isset($_POST['town']) ? $_POST['town'] : null); ?>" placeholder="Población" required aria-required="true" />
    </div>
    <div class="form-group">
      <label for="province">Provincia</label>
      <input type="text" id="province" name="province" class="form-control" value="<?php echo(isset($_POST['province']) ? $_POST['province'] : null); ?>" placeholder="Provincia" />
    </div>
    <div class="form-group">
      <label for="phone">Teléfono</label>
      <input type="text" id="phone" name="phone" class="form-control" value="<?php echo(isset($_POST['phone']) ? $_POST['phone'] : null); ?>" placeholder="Teléfono" />
    </div>
    <input type="submit" id="submit" name="submit" value="Enviar" />
  </div>
</form>

Lo siguiente que haremos es validar el formulario. Para ello preguntaremos si el formulario ha sido enviado, recogeremos y sanitizaremos (si se me permite el palabro) los datos enviados, y si no se cumplen nuestros requisitos mostraremos un mensaje de error usando la clase WP_Error.

Si todos los datos son correctos, lo siguiente es insertar el usuario con la función wp_insert_user():

Como parámetro acepta un array de datos de usuario, entre los que se encuentran: ID, user_pass, user_login, user_nicename, user_url, user_email, display_name, nickname, first_name, last_name, description, rich_editing, user_registered, role, jabber, aim y yim. Para nuestro ejemplo vamos a guardar los datos: user_login (usuario), user_email (email).

A continuación generaremos automáticamente una contraseña con la función wp_generate_password(), y los campos adicionales de población, provincia y teléfono los guardaremos con la función update_user_meta() si la creación del usuario ha sido correcta. La función wp_insert_user() devuelve el ID creado para el nuevo usuario, ese ID es el que pasaremos a la función update_user_meta() para los campos adicionales.

Por último queda notificar al usuario que se ha dado de alta y enviarle un correo para que pueda establecer una contraseña propia. Antes WordPress enviaba las contraseñas por mail, pero en las últimas versiones por seguridad ya no lo hace. En su lugar manda un correo con un enlace para que el usuario pueda crear su propia contraseña. Para eso usaremos la función wp_new_user_notification() a la que le pasaremos los parámetros “user_id” y “both”.

El código completo de la validación del formulario es el siguiente:

<?php

if (isset( $_POST['submit'] )) { //El formulario ha sido enviado
  global $reg_errors;
  $reg_errors = new WP_Error;

  $user = sanitize_text_field($_POST['user']);
  $email = sanitize_email($_POST['email']);
  $town= sanitize_text_field($_POST['town']);
  $province = sanitize_text_field($_POST['province']);
  $phone = sanitize_text_field($_POST['phone']);

  //Comprobamos que los campos obligatorios no están vacios
  if ( empty( $user ) ) {
    $reg_errors->add("empty-user", "El campo nombre es obligatorio");
  }
  if ( empty( $email ) ) {
    $reg_errors->add("empty-email", "El campo e-mail es obligatorio");
  }
  if ( empty( $town) ) {
    $reg_errors->add("empty-town", "El campo Población es obligatorio");
  }
  //Comprobamos que el email tenga un formato de email válido
  if ( !is_email( $email ) ) {
    $reg_errors->add( "invalid-email", "El e-mail no tiene un formato válido" );
  }

  if ( is_wp_error( $reg_errors ) ) {
    if (count($reg_errors->get_error_messages()) > 0) {
      foreach ( $reg_errors->get_error_messages() as $error ) {
        echo $error . "<br />";
      }
    }
  }

  if (count($reg_errors->get_error_messages()) == 0) {
    $password = wp_generate_password();

    $userdata = array(
      'user_login' => $user,
      'user_email' => $email,
      'user_pass' => $password
    );

    $user_id = wp_insert_user( $userdata );

    //Si todo ha ido bien, agregamos los campos adicionales
    if ( ! is_wp_error( $user_id ) ) {
      update_user_meta( $user_id, 'user_town', $town );
      update_user_meta( $user_id, 'user_province', $province );
      update_user_meta( $user_id, 'user_phone', $phone );

      wp_new_user_notification( $user_id, 'both' );
    }
  }
}

Con ésto ya tendríamos nuestro formulario de registro personalizado. Puedes añadir tantos campos adicionales como desees, y adaptar el desarrollo a la medida de tus necesidades.

• « Cómo agregar campos personalizados al…
• Cómo agregar el generador de… »