Añadir campos personalizados al formulario de registro de WordPress

[titulo]Agregar campos personalizados (custom fields) a los usuarios de WordPress[/titulo]

Si alguna vez te has visto en el embrollo de tener que añadir más campos a los ya tradicionales del formulario de registro de WordPress, ¡Ésta es tu entrada!

En este artículo de Loopeando.com vamos a ver:

• Cómo editar el formulario de registro
• Cómo personalizar la vista del backend
• Cómo mostrar esos campos en el front del usuario
• Y un bonus: Cómo crear usuarios desde código, poniéndoles campos personalizados

¡Pasa, disfruta, aprende y comparte!

 

[titulo]Entendiendo la gestión de usuarios de WordPress[/titulo]

WordPress utiliza dos tablas para almacenar la información de registro de usuarios:

• wp_users: Para los datos vitales como contraseñas, permisos, identificadores…
• wp_usermeta: Para los datos accesorios como redes sociales, direcciones, campos personalizados…

 

Y dispone de los siguientes eventos (actions) para señalizar dónde se visualizarán los campos nuevos que añadamos. Siendo:

• edit_user_profile: Se ejecuta únicamente cuando un usuario visualiza el perfil de otro sobre el que tiene permisos de edición. Ej: Si un administrador edita el perfil de otro usuario.
• show_user_profile: Sólo se ejecuta cuando el usuario logueado es el que está viendo su propio perfil.

 

Por lo tanto, nuestros campos personalizados van a crearse y almacenarse en [codigo]wp_usermeta[/codigo], y únicamente utilizaremos [codigo]wp_users[/codigo] cuando vayamos a crear un usuario nuevo dinámicamente.

Y los actions que utilizaremos dependerán de si queremos que esos campos los vea únicamente el administrador, el propio usuario, etc.

Veamos algunos ejemplos.

 

[titulo]Campos personalizados en el formulario de registro del font-end[/titulo]

O lo que es lo mismo, custom fields en el register form:

En este ejemplo crearemos 3 campos nuevos: Población, provincia y teléfono.

Y l código que lo hace posible es:

<?php
// Agregamos los campos adicionales al formulario de registro
function add_fields_to_users_register_form() {
  $user_town = ( isset( $_POST['user_town'] ) ) ? $_POST['user_town'] : '';
  $user_province = ( isset( $_POST['user_province'] ) ) ? $_POST['user_province'] : '';
  $user_phone = ( isset( $_POST['user_phone'] ) ) ? $_POST['user_phone'] : '';?>
 
  <p>
    <label for="user_town">Población<br />
    <input type="text" id="user_town" name="user_town" class="input" size="25" value="<?php echo esc_attr($user_town);?>"></label>
  </p>
 
  <p>
    <label for="user_province">Provincia<br />
    <input type="text" id="user_province" name="user_province" class="input" size="25" value="<?php echo esc_attr($user_province);?>"></label>
  </p>
 
  <p>
    <label for="user_phone">Teléfono<br />
    <input type="number" id="user_phone" name="user_phone" class="input" size="25" value="<?php echo esc_attr($user_phone);?>"></label>
  </p>
 
<?php }
add_action('register_form', 'add_fields_to_users_register_form' );
 
// Validamos los campos adicionales
function validate_user_fields ($errors, $sanitized_user_login, $user_email) {
  if ( empty( $_POST['user_town'] ) ) {
    $errors->add( 'user_town_error', __('<strong>ERROR</strong>: Por favor, introduce tu Población') );
  }
 
  return $errors;
}
add_filter('registration_errors', 'validate_user_fields', 10, 3);
 
// Guardamos los campos adicionales en base de datos
function save_user_fields ($user_id) {
  if ( isset($_POST['user_town']) ){
    update_user_meta($user_id, 'user_town', sanitize_text_field($_POST['user_town']));
  }
 
  if ( isset($_POST['user_province']) ){
    update_user_meta($user_id, 'user_province', sanitize_text_field($_POST['user_province']));
  }
 
  if ( isset($_POST['user_phone']) ){
    update_user_meta($user_id, 'user_phone', sanitize_text_field($_POST['user_phone']));
  }
}
add_action('user_register', 'save_user_fields');?>

 

[titulo]Campos personalizados en el perfil de usuario del backend[/titulo]

En este otro ejemplo vamos añadir Nombre de tu hijo y fecha de nacimiento:

Cuyo código sería:

// Agregamos los campos adicionales a Tu Perfil y Editar Usuario
function add_custom_fields_to_users( $user ) {
  $nomhijo1 = esc_attr( get_the_author_meta( 'event_nomhijo1', $user->ID ) );
  $fechahijo1 = esc_attr( get_the_author_meta( 'event_fechahijo1', $user->ID ) );  
  ?>
<div class="hijos_colorea" style="background-color: bisque!important; padding: 50px!important;">
  <h3>Hij@s</h3>
 		  
  <table class="form-table">
    <tr>
      <th><label for="user_town">1º Nombre hij@</label></th>
      <td><input type="text" name="event_nomhijo1" id="event_nomhijo1" class="regular-text" value="<?php echo $nomhijo1;?>" /></td>
    </tr>
	<tr>
      <th><label for="user_town">1º Fecha nacimiento</label></th>
      <td><input type="text" name="event_fechahijo1" id="event_fechahijo1" class="regular-text" value="<?php echo $fechahijo1;?>" />
	  </td>
    </tr>
  </table>
  </div>

<?php }

add_action( 'show_user_profile', 'add_custom_fields_to_users' );
add_action( 'edit_user_profile', 'add_custom_fields_to_users' );
 
 
//Guardamos los datos personalizados
// Guardamos los campos adicionales en base de datos
function save_user_fields ($user_id) {
  if ( isset($_POST['event_nomhijo1']) ){
    update_user_meta($user_id, 'event_nomhijo1', sanitize_text_field($_POST['event_nomhijo1']));
  }
  
   if ( isset($_POST['event_fechahijo1']) ){
    update_user_meta($user_id, 'event_fechahijo1', sanitize_text_field($_POST['event_fechahijo1']));
  }
} 
add_action( 'personal_options_update', 'save_user_fields' );
add_action( 'edit_user_profile_update', 'save_user_fields' );

 

[titulo]¿Y dónde pondríamos estos códigos de custom fields?[/titulo]

Pueden situarse directamente en el functions.php de tu tema activo, pero no es lo recomendable puesto que:

• Un error en el código puede comprometer la estabilidad de toda la web.
• Al actualizar el tema puedes perder las modificaciones realizadas.

Por ello nosotros [subraya_verde]siempre recomendamos ir añadiendo estas personalizaciones en un plugin propio.[/subraya_verde] Es decir, creas un plugin y éste cargará todo el código personalizado que normalmente añarirías en el functions.php

De esa forma, cuando quieras regresar a la versión original del tema, basta con desactivar tu plugin. Y cuando lo actives, el sistema te bloqueará la activación si  detecta fallos fatales que generen errores 500.

 

Para crear un plugin basta con ir a la carpeta wp-content –> plugins y crear una nueva con el nombre que desees.

Dentro de esa carpeta creas un archivo .php con el siguiente código:

<?php 

/**
 * Plugin Name: Nombre del plugin (Este nombre es el que aparecerá en el listado de plugins)
 * Plugin URI: https://www.loopeando.com/
 * Description: Este plugin ha sido desarrollado por XXXXX para ZZZZZ
 * Version: 0.0.1
 * Author: Loopeando.com
 * Author URI: https://www.loopeando.com/
 * Requires at least: 4.9.2
 * Tested up to: 4.9.2
 *
 * Text Domain: wprincipiante-ejemplo
 * Domain Path: /languages/
 */
defined( 'ABSPATH' ) or die( '¡Sin trampas!' );
global $wpdb;

/**
* Y aquí añades todo el código que normalmente añadirías el functions.php
*/
?>

 

[titulo]Bonus: Crear un usuario con campos personalizados a través de código[/titulo]

En linea con lo anterior, os presentamos algunas funciones nuevas:

• username_exists: Comprueba si un usuario existe en base a un criterio. Por ejemplo, un email.
• wp_generate_password: Genera una contraseña aleatoria.
• wp_create_user: Inserta un nuevo usuario en la base de datos. Como parámetros mínimos, hay que pasarle un username y una contraseña.
• wp_update_user: Actualiza la información de un usuario ya existente.

 

Con todas ellas podemos generar un script que cree usuarios dinámicamente. Algo como lo siguiente:

//En este ejemplo, recogemos los datos de nombre, apellidos y email de un formulario. Por ejemplo, de un Gravity Form
//Pero podríamos generarlos automáticamente si quisiésemos
$username = str_replace(array( '(', ')',' ' ), '', esc_attr($nombre));
$username = strtolower($username); 
$email_address = $email;
	

//Comprobamos si ya existe otro usuario con ese email, ya que será el identificador de acceso y debe ser único
if( null == username_exists( $email_address ) ) {

  //Generamos la contraseña
  $password = wp_generate_password( 12, false );

  //Creamos el usuario y obtenemos su id
  $user_id = wp_create_user( $email_address, $password, $email_address );

  //Sobre el usuario ya creado, actualizamos algunos datos como el identificador (nickname)
  wp_update_user(
    array(
      'ID'  =>    $user_id,
      'first_name'  =>    $nombre,
      'last_name'  =>    $apellidos,
      'display_name'  =>   $nombre." ".$apellidos,
      'nickname'  =>    $email_address
    )
  );
  
   //Todos los usuarios deben tener, obligatoriamente, un rol asignado. En este caso, suscriptor
  $user = new WP_User( $user_id );
  $user->set_role( 'subscriber' );
  
  global $wpdb;
  //Insertamos los campos personalizados en wp_usermeta	
	$wpdb->insert(
	    'wp_usermeta',
	     array(		  
		  'user_id' => $user_id,
	          'meta_key' => 'event_nomhijo1',
		  'meta_value' => $nomhijo1
		)
	);
	
	$wpdb->insert(
	    'wp_usermeta',
	    array(		  
		  'user_id' => $user_id,
	          'meta_key' => 'event_fechahijo1',
		  'meta_value' => $fechahijo1
		)
	);
	

// Enviamos un email dando la bienvenida y facilitándole la contraseña generada
$to = $email_address;
$subject = '¡Enhorabuena! Acabas de dar el primer paso para mejorar tu vida';
$body = 'Ahora nuestro equipo de expertos valorará tu formulario inicial para poder adaptarse a tus necesidades de la manera más eficaz posible.<br><br> Si has solicitado una cita telefónica, te haremos llegar un recordatorio tan pronto como se confirme y, entre tanto, puedes ir accediento a tu plataforma con los siguientes datos:<br><br> Correo electrónico: '.$email_address.'<br>Contraseña: ' . $password.'<br><br>Cualquier duda estamos a tu disposición.';
$headers = array('Content-Type: text/html; charset=UTF-8');

wp_mail( $to, $subject, $body, $headers );

 
}