Cómo agregar campos personalizados al perfil de usuario de WordPress

WordPress nos da la opción de permitir que los usuarios se registren en nuestro sitio (en Ajustes => Generales => Cualquiera puede registrarse).

Por defecto sólo pide dos campos básicos: “Nombre de Usuario” y “Correo electrónico”. Vamos a ver cómo agregar campos personalizados al perfil de usuario tanto en el formulario de registro cómo en la administración de usuarios en el back-end, por si somos nosotros mismos los que queremos dar de alta usuarios manualmente desde el panel de control.

Para la gestión de usuarios WordPress utiliza dos tablas en la base de datos wp_users (para la información básica) y wp_usermeta (para datos adicionales). Es en ésta última tabla donde se almacenará nuestra información adicional.

Lo primero que hay que entender es cómo y dónde se maneja la información relativa a los usuarios. WordPress gestiona usuarios en diferentes pantallas, y en todas ellas vamos a ver cómo agregar, validar y guardar los nuevos campos personalizados al perfil de usuario:

• Front-end: Formulario de registro (action: register_form)
• Back-end: Tu perfil (action: show_user_profile)
• Back-end: Editar usuario (action: edit_user_profile)
• Back-end: Añadir nuevo usuario: WordPress no dispone de ningún action, veremos cómo incluirlo mediante jQuery

Vamos a verlo todo con un ejemplo práctico dónde agregaremos los campos población, provincia y teléfono al perfil de usuario de WordPress.

Agregar campos personalizados al perfil de usuario en el formulario de registro del front-end:

Añadiremos 3 funciones en nuestro archivo functions.php, la primera para añadir los campos al formulario de registro, la segunda para validar los datos y la tercera para guardarlos.

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

Agregar campos personalizados al perfil de usuario en el back-end (Tu perfil y Editar usuario):

Vamos a utilizar dos actions: show_user_profile y edit_user_profile, para añadir nuestros campos personalizados al perfil de usuario. Como antes, vamos a crear una función para agregar los campos al formulario de Tu perfil y Editar usuario, y reutilizaremos la función creada anteriormente (save_user_fields()) para guardar los datos:

<?php

// Agregamos los campos adicionales a Tu Perfil y Editar Usuario
function add_custom_fields_to_users( $user ) {
  $user_town = esc_attr( get_the_author_meta( 'user_town', $user->ID ) );
  $user_province = esc_attr( get_the_author_meta( 'user_province', $user->ID ) );
  $user_phone = esc_attr( get_the_author_meta( 'user_phone', $user->ID ) );?>

  <h3>Campos adicionales</h3>

  <table class="form-table">
    <tr>
      <th><label for="user_town">Población</label></th>
      <td><input type="text" name="user_town" id="user_town" class="regular-text" value="<?php echo $user_town;?>" /></td>
    </tr>
    <tr>
      <th><label for="user_province">Provincia</label></th>
      <td><input type="text" name="user_province" id="user_province" class="regular-text" value="<?php echo $user_province;?>" /></td>
    </tr>
    <tr>
      <th><label for="user_phone">Teléfono</label></th>
      <td><input type="text" name="user_phone" id="user_phone" class="regular-text" value="<?php echo $user_phone;?>" /></td>
    </tr>
  </table>
<?php }
add_action( 'show_user_profile', 'add_custom_fields_to_users' );
add_action( 'edit_user_profile', 'add_custom_fields_to_users' );

add_action( 'personal_options_update', 'save_user_fields' );
add_action( 'edit_user_profile_update', 'save_user_fields' );

Agregar campos personalizados al perfil de usuario en el back-end (Añadir Nuevo Usuario):

Ésta parte tiene un poco más de miga porque WordPress no dispone a día de hoy de ningún action para introducir nuestros campos personalizados en el formulario de Añadir Nuevo Usuario.

¿Qué alternativas tenemos? Añadiremos nuestros campos mediante jQuery. Crearemos al final de la tabla unas nuevas filas con los inputs correspondientes de nuestros campos. Podemos crear un archivo js en una carpeta “/js” dentro de nuestro tema, cargarlo en el back-end de la siguiente manera:

<?php

function my_admin_scripts(){
  wp_enqueue_script( 'custom-users-fields-js', get_template_directory_uri() . '/js/custom-users-fields.js', array('jquery'), '1.0' );
}
add_action('admin_print_scripts', 'my_admin_scripts');

Y en nuestro archivo “custom-users-fields.js” agregamos éstas líneas:

jQuery(document).ready(function($){
  var custom_fields;

  custom_fields = '<tr class="form-field form-required">';
  custom_fields += '<th scope="row">';
  custom_fields += '<label for="user_town">Población</label>';
  custom_fields += '</th>';
  custom_fields += '<td>';
  custom_fields += '<input type="text" id="user_town" name="user_town">';
  custom_fields += '</td>';
  custom_fields += '</tr>';

  custom_fields += '<tr class="form-field">';
  custom_fields += '<th scope="row">';
  custom_fields += '<label for="user_province">Provincia</label>';
  custom_fields += '</th>';
  custom_fields += '<td>';
  custom_fields += '<input type="text" id="user_province" name="user_province">';
  custom_fields += '</td>';
  custom_fields += '</tr>';

  custom_fields += '<tr class="form-field">';
  custom_fields += '<th scope="row">';
  custom_fields += '<label for="user_phone">Teléfono</label>';
  custom_fields += '</th>';
  custom_fields += '<td>';
  custom_fields += '<input type="number" id="user_phone" name="user_phone">';
  custom_fields += '</td>';
  custom_fields += '</tr>';

  $('#createuser .form-table tbody').append(custom_fields);
});

Para el guardado de nuestros datos no hace falta crear ninguna función adicional ya que nos vale con el action que hemos utilizado antes: add_action(‘user_register’, ‘save_user_fields’);

• « Cómo crear un formulario de…
• Cómo crear un formulario de… »