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

Child themes en WordPress: Guía rápida
Child themes en WordPress: Guía rápida
Un child theme o tema hijo en WordPress es un tema que modifica o extiende la funcionalidad de otro tema, llamado “tema padre”. En esta…
Cómo desactivar Emojis en WordPress
Cómo desactivar Emojis en WordPress
A partir de la versión 4.2 de WordPress se ha introducido una nueva característica: Emojis Icons. Permite el uso de los iconos Emoji en los…
Autocomplete Off en el formulario de login al backend de WordPress
Autocomplete Off en el formulario de login al backend de WordPress
En ésta entrada vamos a ver cómo agregar la funcionalidad autocomplete=”off” para los campos de usuario y clave en el formulario de login al backend…
Revisiones y autoguardados en WordPress
Revisiones y autoguardados en WordPress
Qué son las revisiones? Las revisiones son un control de versiones de las entradas y páginas que WordPress guarda en base de datos. Cada vez…