registration form

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.

formulario registro

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

NOTA

Si deseamos que uno de estos campos sea obligatorio, basta con añadir la clase form-required al <tr> de nuestro campo, como en nuestro ejemplo hemos hecho con el campo Población.

¿Te ha resultado útil esta información? 🍺

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.

Comentarios

27 comentarios en Cómo agregar campos personalizados al perfil de usuario de WordPress

  1. gracias por compartirlo. He seguido los pasos pero no logro que el nuevo usuario reciba el mail para acceder al sitio…
    puedes indicarme qué estoy haciendo mal o bien los errores mas comunes para mi caso…gracias

  2. Hola buen post. Tengo el siguiente problema, yo quisiera que la informacion que aparece en el registro cuando un usuario la ingresa se escriba en la tabla wp_users y no en la tabla wp_usermeta.
    Lo digo porque uso el plugin new_user_approve que le envia al administrador del sitio la informacion del usuario que se quiere registrar para que este le de o no autorizacion, peroesa informacion que recibe el admin esta en la tabla wp_users, es decir toda la informacion generada en el formulario de este post no le llegaria al admin en su correo solo el nombre y email del nuevo usuario.
    Espero me ayuden. Saludos

    1. Hola Alejandro

      Lo primero que te diría es que mires a ver si ese plugin que comentas tiene algun hook que te permita intervenir y añadir la información del usuario que necesitas y que está almacenada en user_meta.

      En caso de que lo que necesitas sea sólo modificar la información del usuario que WordPress almacena en la tabla users, echa un vistazo a la función wp_update_user() https://codex.wordpress.org/Function_Reference/wp_update_user

  3. Hola, muchas gracias Pablo,

    Estoy actualizando una web a wordpress, tiene una base de datos de 2500 usuarios y cada registro de usuario tiene 50 campos.

    Al pasar a wordpress tengo una duda sobre que es mejor para el rendimiento de mysql.

    ¿ Es mejor añadir parte de los campos a wp_users y así descargar wp_usersmeta ?
    ¿ Es mejor añadir todos los campos a wp_usermeta ?

    ¿ Hay otras opciones mejores ?

    gracias de antemano,
    Lakhmi Chand

    1. Si tuviera que hacerlo yo, en wp_users no añadiría ningún campo más, es decir, utilizaría esta tabla para el usuario, password e email, y los 50 campos adicionales al usermeta

      No es una gran cantidad de datos, no deberías tener problemas de rendimiento

  4. Hola Pablo, muchas gracias por la información. Justamente me encuentro haciendo esto que amablemente explicas. Soy novato en esto y estoy modificando una página que me hizo un amigo para dedicarlo a otro asunto. Tengo una pregunta referente a lo que explicas, cómo hago para subir una imagen desde el formulario de registro y que también aparezca en el perfil de usuario en el back-end? que no sea la foto de perfil. Es para que el usuario suba un comprobante de dirección (una cuenta o correspondencia que este a su nombre escaneada o fotografiada) y quede en su perfil de manera que yo pueda ver esa información y sepa que cumple con todos los requisitos.

    De antemano muchas gracias.
    Saludos
    Tomokazu

      1. Muchas gracias por la pronta respuesta. Lo revisaré y veré como aplicarlo en lo que quiero hacer. Te comento como me va.
        Saludos

      2. Hola Pablo, lamentablemente no fui capaz de utilizar el código de esa entrada. Traté de incorporar lo que podría servirme pero no pude. Gracias por todo, seguiré intentándolo haber si lo logro.
        Saludos!

  5. Hola buen dia, Estimado primero que agradecer tu tutorial, el tema es el siguiente estoy realizando una integración que nos pide un cliente, y necesito incluir un campo en el BACK END para nosotros ingresar un CODE USER entre los campos que usamos para registrar un usuario, el tema es que no encuentro ese archivo que tu indicas custom-users-fields.js, si es de crearlo donde debo guardarlo, disculpa la verdad apenas me vengo integrando con el WORDPRESS, agradezco la ayuda que me puedas brindar

    1. Efectivamente Danny, el archivo custom-users-fields.js es un archivo creado con el propósito de añadir al formulario de usuarios mediante JavaScript los campos adicionales

      Como puedes ver en el código yo lo almaceno en una carpeta «/js» dentro del tema (get_template_directory_uri() . ‘/js/custom-users-fields.js’)

      Saludos

      1. Hola Pablo gracias por tu pronta respuesta, comprendi esa parte totalmente, era para tenerlo claro, ahora m surge una duda a donde debo agregar este codigo

        y lo ultimo yo uso la plantilla hija esa archivo .js q cree lo cree en el tema padre esta bien?

          1. Mira he creado todo segun como me indicar tu, una carpeta JS dentro del tema hijo, y agregue el codigo al function.php pero ahora la pagina me arroja un ERROR 500 me ha pasado antes cuando agrego lineas al function.php, borre el codigo indicado por ti para añadirlo, y regreso el sitio a su normalidad, que podria ser??

          2. Así, en la distancia, como comprenderás me es imposible ayudarte. Éste código funciona. Prueba a ir poniendo y quitando partes del código hasta que puedas trazar el error.

            Probablemente se trate de algún caracter mal escrito, o de algún espacio, o de alguna llave de PHP sin cerrar, o algo que al copiar y pegar ha cambiado de formato

            Saludos

          3. Hola pablo, agradezco siempre tu colaboración, oye yo copio y pego el codigo y lo agregue a un nuevo tema de otra pagina q tengo tambien con wordpress, y sucedio lo mismo del error 500, q podria estar mal

          4. Pablo acabo de notar algo, yo agrego el codigo de archivo .js y el ultimo codigo al functions.php pero no agrego nada de los codigo anteriores, y veo que tu haces referencia del codigo para guardar los datos, add_action(‘user_register’, ‘save_user_fields’), pero este codigo solo esta presente en la primera linea de codigos, no en los codigos que te mencione anteriormente, que me estaria faltando?

          5. Agregue todos los codigos, al functions.php en el sitio de prueba pero aun me sigue arrojando el error 500,no se que puede estar faltando

  6. Hola que tal? mira tengo una tarea de que tengo que ingresar datos en el editor de usuario (back-end) sobre unas visitas de garantía lo cual tengo que poner la persona cuantas visitas de garantía tienen, edite un poco tu codigo y quedó así pero me aparece error y no sé mucho de código, me ayudarías porfa ID ) );?>

    Campos adicionales

    Visitas de garantía
    <input type="int" name="visitas_gart" id="visitas_gart" class="visitas_gart" value="» />

    «lo que pasa es que cuando de doy a guardar cambios aparece el siguiente error» Esta página no funciona
    La página no puede procesar esta solicitud ahora.
    HTTP ERROR 500

    1. El único error que veo en el código que comentas es en el value del input visitas_gart. En lugar de value=»<?php echo $visitas_gart;?>» debería ser

      value=""

      Parece que algún editor te ha jugado una mala pasada al copiar/pegar. Suerte

      1. Amigo, me sigue apareciendo el error :/ nose si copie el codigo mal xD
        function add_custom_fields_to_users( $user ) {
        $visitas_gart = esc_attr( get_the_author_meta( ‘visitas_gart’, $user->ID ) );?>

        Campos adicionales

        Visitas de garantía
        <input type="int" name="visitas_gart" id="visitas_gart" class="visitas_gart" value="» />

        Era ese xD me aparece error en guardar cambios, no debo cambiar nada en el phpmyadmin? 🙁

        1. ¿tienes el proyecto en local? revisa los logs para ver el error. Si lo tienes en producción, averigua si tienes acceso a los logs o solicítaselos a tu proveedor de hosting.

          Intenta trazar el error y ver qué está pasando

  7. Hola Pablo!.
    Tu post es una genialidad, me sirvió muchísimo y, aunque pasaron 4 años desde su creación, necesito consultarte, cómo hago para que la misma información de registro y el campo adicional aparezcan en woocommerce?.
    En wp lo tengo configurado y está perfecto, pero no sé como llevarlo a la página «my-account» del cliente. Soy nuevo en esto.
    Te agradecería muchísimo la ayuda.
    Saludos!.

  8. Hola pablo, muy buen articulo (tutorial), bien claro en varios aspectos, muchas gracias por este trabajo!

    Siguiendo estos pasos anoche, pude dejar de usar el plugin «Custom User Registration Fields para WooCommerce».

    Aprovecho a consultarte.

    Tengo un sitio de subastas, el rol para poder ofertar es el de Customer.

    Estoy buscando que el usuario al registrarse, solo lo haga con un email y su contraseña (bien fácil y rápido, hoy esta media hora llenando todo un formulario…), y con un rol inferior a Customer (que no le permita ofertar ni comprar)

    Y, que en su perfil, tenga la «obligación» de completar los demás campos (nombres/direcciones/etc.) para asi cambiar de rol y pasar a «Customer» para tener los permisos de oferta y compra.

    O sea, no puede ofertar ni comprar hasta que no complete otros campos en su perfil.

    ¿Tienes alguna idea de como encarar esto?, o si hay algún complemento que pudiera ayudarme en esta tarea?

    Mil gracias y saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *:

  • El fin del tratamiento es únicamente la moderación de comentarios para evitar spam
  • La legitimación es tu consentimiento al comentar
  • No se comunicará ningún dato a terceros salvo por obligación legal
  • Tienes derecho al acceso, rectificación y eliminación de los comentarios