Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
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.

 

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:

 

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:

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

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.

Puede que también te interese

Cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante
Cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante
En esta entrada vamos a ver como añadir campos personalizados o custom fields al back-end de WordPress de manera elegante, es decir, utilizando meta_boxes. Actualmente…
Añadir clases par/impar en los listados de WordPress
Añadir clases par/impar en los listados de WordPress
En esta entrada vamos a ver cómo introducir las clases par/impar en los listados de WordPress de tres formas diferentes. A veces puede resultar útil…
Añadir cabeceras HTTP de seguridad en WordPress
Añadir cabeceras HTTP de seguridad en WordPress
En éste artículo vamos a ver cómo podemos enviar cabeceras HTTP de seguridad en nuestra web. Creo que es algo que no se utiliza mucho,…
Cómo eliminar campos personalizados o custom fields que ya no utilizas
Cómo eliminar campos personalizados o custom fields que ya no utilizas
Es algo muy habitual el uso de campos personalizados o custom fields para hacer desarrollos a medida sobre WordPress. También es muy habitual con el…




  • Juan C Boly

    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

  • Alejandro

    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

    • 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

  • Lakhmi Chand

    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

    • 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

      • Lakhmi Chand

        Ok, muchas gracias por la pronta respuesta.

  • Tomokazu Nonaka

    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

  • Danny hernandez

    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

    • 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

      • Danny hernandez

        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?

        • Hola Danny.

          Si has hecho un tema hijo, lo correcto es que ese archivo JS esté en el tema hijo también. El resto del código iría al functions.php de tu tema hijo.

          Saludos

          • Danny hernandez

            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??

          • 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

          • Danny hernandez

            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

          • Danny hernandez

            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?

          • Efectivamente, es necesario todo el código. Los 3 primeros bloques van al functions.php y el cuarto al archivo JS

          • Danny hernandez

            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