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

Site Icon, mucho más que un favicon
Site Icon, mucho más que un favicon
En la versión 4.3 de WordPress se introdujo una nueva característica: el Site Icon. Antes de esta versión teníamos que introducir el favicon manualmente, o…
Cómo añadir un enlace para los ajustes en el listado de plugins
Cómo añadir un enlace para los ajustes en el listado de plugins
Si estas desarrollando un plugin o vas a desarrollarlo, puede resultarte de utilidad saber cómo añadir un enlace para los ajustes de tu plugin en el…
Mejora la puntuación de Google PageSpeed Insights: Eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página
Mejora la puntuación de Google PageSpeed Insights: Eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
Cómo mostrar los posts más vistos o populares en WordPress
Cómo mostrar los posts más vistos o populares en WordPress
Probablemente en alguna ocasión te hayas encontrado con la necesidad de mostrar un listado de los posts más vistos o más populares de tu sitio.…