CMS WordPress

Añadir campos personalizados al formulario de registro de WordPress

Agregar campos personalizados (custom fields) a los usuarios de WordPress

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!

 

Entendiendo la gestión de usuarios de WordPress

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 wp_usermeta, y únicamente utilizaremos wp_users 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.

 

Campos personalizados en el formulario de registro del font-end

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');?>

 

Campos personalizados en el perfil de usuario del backend

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' );

 

¿Y dónde pondríamos estos códigos de custom fields?

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 siempre recomendamos ir añadiendo estas personalizaciones en un plugin propio. 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: http://www.loopeando.com/
 * Description: Este plugin ha sido desarrollado por XXXXX para ZZZZZ
 * Version: 0.0.1
 * Author: Loopeando.com
 * Author URI: http://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
*/
?>

 

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

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 );

 
}

 

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

4 Comentarios

Haz clic aquí para dejar tu comentario

  • Hola, gracias por compartir, me gustaría preguntarte varias cosas:

    1. si se puede combinar este metodo con lo descruto en el siguiente articulo: https://www.loopeando.com/almacenar-gravity-forms-en-base-de-datos/

    2. estoy creando un sitio web, y estoy estancado en esto del registro por las siguientes razones:

    a) me gustaría crear formularios personalizados sobre la misma web, esto lo he logrado no en su totalidad con un plugin, tanto para el registro como para el ingreso, el problema es el siguiente:

    yo deseo que al hacer login el usuario no ingrese al escritorio de wordpress si no, una pagina estática llamada cuenta donde se muestren varias opciones, entre ellas obligar al usuario a llenar campos para completar su perfil.
    entonces no se si el método descrito también guarda los datos de los usuarios en la base de datos como el del enlace anterior, y si es asi entonces como lograr usar esos datos para que se auto rellene el perfil de usuario, y pueda el usuario completar su perfil.

    b) ¿Como hacer para que en la página perfil a la que ingrese el usuario se muestren los campos obtenidos durante el registro? se que para este caso debería tener además de la pagina cuenta, tambien la pagina perfil que sería donde se mostrarán los campos obtenidos en el registro y los campos vacíos que debe completar

    agradezco tus respuestas

    • Buenas noches Teodomiro.
      Gracias a ti por interesarte en nuestros artículos ^^

      Esperamos poder ayudarte.

      Contestando punto por punto tus dudas:

      1º Sí, ambos métodos pueden combinarse, aunque en tu caso particular, ambos servirían para lo mismo. Con Gravity tienes la flexibilidad de poder utilizar esos datos como desees: Para crear una biblioteca, un gimnasio, un sistema de estadísticas… pudiendo almacenar datos en BBDDs personalizadas.

      Con el método de este post, los datos van directos a las tablas de registro de usuario, por lo que es un método más rápido y efectivo para altas nuevas.


      a) Este método te servirá perfectamente para ese fin, ya que podrás añadir tantos campos como desees y del tipo que quieras.

      WordPress redirecciona por defecto a los usuarios Editor y Administrador al admin de WordPress, y al resto a su escritorio (o el de WooCommerce). Pero puedes crear una página personalizada y redireccionar allí el tráfico de determinados roles cuando se logueen.

      Por ejemplo, todos los usuarios bajo el rol “suscriptor”, al loguearse serán redirijidos a tu página personalizada. Eso puedes hacerlo con:
      – Si usas WooComerce: El plugin “Woo Login Redirect”
      – Si quieres personalizar también el formulario de login: El plugin “Theme My Login”

      Con el método descrito en este post, los datos de campos personalizados se añaden automáticamente a la base de datos y se asignan al perfil de ese usuario. Así que cuando el usuario entre en su escritorio, verá por rellenar los campos personalizados si no los ha cumplimentado durante el alta.

      b) Si empleas este método, no tienes que hacer nada especial. Le aparecerán automáticamente en su escritorio para que pueda cumplimentarlos. Pero no olvides usar los hooks:
      add_action( ‘show_user_profile’, ‘add_custom_fields_to_users’ );
      add_action( ‘edit_user_profile’, ‘add_custom_fields_to_users’ );

      Resumiendo:
      – SI sigues este tutorial podrás añadir campos personalizados al formulario de registro (sin plugins).

      – Los campos que el usuario rellene aparecerán tanto en tu admin de WordPress como en su escritorio, para que pueda personalizarlos, editarlos o rellenarnos si no lo ha hecho antes. Este proceso se hace automático, no tienes que crear bases de datos nuevas ni nada similar.

      – Si quieres crear un escritorio personalizado, puedes o bien editar la plantilla de escritorio de WordPress, o crear una página y redireccionar el login por roles con alguno de los 2 plugins que te he comentado.

      Mucha suerte y cualquier duda nos dices!

      • Gracias por responder,
        si el método obviamente que tengo para registro es con un plugin, y he realizado un registro de prueba y claro se guarda en la base de datos.

        el problema es crear el perfil de vuelta hacer que ese perfil se muestre en por ejemplo la pagina perfil
        lo que tuve en mente fue crear lo siguiente:

        1. una pagina llamada account donde se reedirecciona al hacer login
        2. en esa pagina hacer un menú vertical donde uno de sus items sea perfil
        3. aqui es donde esta el problema en perfil se deben mostrar los datos del usuario que esta logueado solo esos. trarte de crear un plugin asi:
        ————————————————————————————-

        —————————————————————————–
        en la carpeta plugin una carpeta llamada perfil, dentro de esta un archivo php llamado perfil

        este archivo basicamente segun lo que consegui por internet es:

        a) atrapa la id del usuario que está logueado en el momento ( a mi no me funciona no se porque)
        b) consulta la base de datos
        c) muestra los campos en perfil de la base de datos
        d) también tengo una duda imprimir estos datos en perfil en la pagina de wordpress es correcto mediante codigos cortos? para este caso seria : [profilephp]

        e) lo de agregar campos personalizado imagino que seria crear otro archivo con el nombre personalizado y moldear tu script a mi necesidad y luego invocar ese php con include o lo puedo hacer dentro del mismo archivo?

        http://www.forosdelweb.com/f18/pagina-perfil-para-cada-usuario-990262/ aqui esta un ejemplo en el que queria basarme pero no medio resultados

        y en este es el que me estoy basando: https://www.taringa.net/comunidades/webdesign/3553634/Ayuda-Con-Usuario-Y-Mostrar-Perfil.html
        cual crees que servira para mostrar el perfil para el usuario que este logueado o inicie sesion solamente?
        agradezco tus respuestas

        • Para poder usar funciones de WordPress (códigos cortos, funciones ya definidas en WP, etc..) recuerda que debes poner en la primera línea de las páginas que crees:

          global $wpdb;

          Tras ello, para obtener la id del usuario logueado:

          $current_user_id = get_current_user_id();

          Si quieres usar códigos cortos en PHP, usa la función do_shortcode();
          Por ejemplo: do_shortcode(‘[profilephp]’);

          En cuanto a la arquitectura de los archivos, no existe limitaciones. Lo puedes hacer todo en un mismo archivo, o ir creando archivos para cada rama concreta del desarrollo. Eso ya va en gustos. Si bien en los plugins de PHP se suele emplear una estructura similar por el bien de la comprensión del desarrollador.

          El código de Taringa, por ejemplo, no está pensado para WordPress. Pero lo puedes adaptar a tus necesidades.

          Mucha suerte con tu desarrollo, y ánimo!!

          PD: Si quieres que echemos un vistazo a tu código y te ayudemos/hagamos el desarrollo que necesitas, puedes escribirnos a info@loopeando.com y nos cuentas con detalle para que te pasemos el presupuesto más ajustado posible.