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

Lazy load en WordPress para mejorar la velocidad de carga de tu web
Lazy load en WordPress para mejorar la velocidad de carga de tu web
Lazy load, carga diferida o carga perezosa es una técnica que consiste en retrasar la carga de ciertos tipos de contenido como imágenes, vídeos y frames.…
WordPress Hooks: Actions
WordPress Hooks: Actions
Si estás familiarizado con WordPress, probablemente hayas oído hablar de los hooks, pero… ¿qué son o para qué sirven? Los hooks de WordPress podrían definirse…
Cómo evitar la actualización de plugins concretos en WordPress
Cómo evitar la actualización de plugins concretos en WordPress
Si has hecho desarrollos a medida en WordPress seguramente te has encontrado en alguna ocasión con la siguiente situación: Te han pedido un desarrollo en…
Cómo eliminar automáticamente los enlaces por defecto en las imágenes dentro del editor de WordPress
Cómo eliminar automáticamente los enlaces por defecto en las imágenes dentro del editor de WordPress
WordPress dispone de un sistema potentísimo para administrar el contenido multimedia de tu sitio web. Es muy fácil subir archivos, imágenes, etc…y siempre las tendremos…