Agregar campos adicionales al perfil de usuario

[ 23 agosto 2018 ] [ Autor: Jhon Marreros Guzmán ] [ Core - Avanzado] [ ]

WordPress por defecto tiene algunos campos básicos para el perfil de usuario, sin embargo nos ofrece algunos Hooks que podemos usar para agregar campos personalizados y así guardar información adicional de nuestros usuarios.

Generalidades

En este artículo veremos cómo añadir campos adicionales al perfil de usuario directamente a través de código, sin embargo también existen una serie de plugins que te pueden facilitar el trabajo, por ejemplo: Profiles extra fields.

Agregando campos adicionales en la sección de contacto

En la pantalla de perfil de usuario existen varias secciones, una manera práctica de agregar nuevos campos es usar una sección existente, WordPress tiene un Hook para hacer modificaciones a los campos de la sección de contacto, por lo que para añadir un nuevo campo de texto en la sección de contacto podemos usar el siguiente código:


add_filter('user_contactmethods','agregar_campos_contacto');

function agregar_campos_contacto( $arr ) {
    $arr['phone'] = __('Phone');
    return $arr;
}

En el código anterior:

Hemos usado el Hook de filtro user_contactmethods
Este filtro hace referencia a la función agregar_nuevos_campos_contacto que acepta un parámetro
El parámetro aceptado es un array asociativo al cual podemos añadir nuevos elementos
Finalmente retornamos el array modificado con el nuevo elemento incluido

A pesar de ser un código que tendrá efecto en el backend del sitio, puedes agregar este código en el archivo functions.php de tu theme o child theme o usar algún plugin de snippets.

Tener en cuenta que no es posible cambiar el campo de texto por otro tipo de campo, además por defecto el campo es opcional.

Luego de agregar este código aparecerá un nuevo campo de teléfono en la sección de contacto, tal como se ve en la siguiente imagen:

Agregar campo adicional sección contacto

Agregando campos adicionales en una nueva sección

Esta opción es mucho más flexible ya que puedes añadir cualquier tipo de campo,

Para mostrar los campos en la pantalla de perfil se usan dos Hooks:

show_user_profile: cuando el propio usuario esta viendo su perfil
edit_user_profile: cuando un administrador esta viendo el perfil de otro usuario.

Para grabar los campos en la pantalla de perfil se usan igualmente dos Hooks:

personal_options_update: cuando el propio usuario esta grabando su perfil
edit_user_profile_update: cuando un administrador esta grabando el perfil de otro usuario.

En el siguiente código se agrega una nueva sección de ejemplo de datos académicos con un campo adicional de profesión.


//Añadimos los campos en una nueva sección
add_action( 'show_user_profile', 'agregar_campos_seccion' );
add_action( 'edit_user_profile', 'agregar_campos_seccion' );
 
function agregar_campos_seccion( $user ) {
?>
    <h3><?php _e('Datos Académicos'); ?></h3>
    
    <table class="form-table">
        <tr>
            <th>
                <label for="profesion"><?php _e('Profesion'); ?></label>
            </th>
            <td>
                <input type="text" name="profesion" id="profesion" class="regular-text"
                	value="<?php echo esc_attr( get_the_author_meta( 'profesion', $user->ID ) ); ?>" />
                <p class="description"><?php _e('Ingresa tu profesión'); ?></p>
            </td>
        </tr>
    </table>
<?php }

//Guardamos los nuevos campos
add_action( 'personal_options_update', 'grabar_campos_seccion' );
add_action( 'edit_user_profile_update', 'grabar_campos_seccion' );

function grabar_campos_seccion( $user_id ) {
	
    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }

    if( isset($_POST['profesion']) ) {
        $profesion = sanitize_text_field($_POST['profesion']);
        update_user_meta( $user_id, 'profesion', $profesion );
    }
}

Como resultado del código anterior obtendremos algo similar a lo que se muestra en la siguiente imagen:

Campos adicionales en perfil de usuario en nueva sección

Tener en cuenta que todos los campos adicionales se almacenan en la tabla wp_usermeta, por lo tanto se pueden consulta con las funciones get_the_author_meta o get_user_meta

Conclusión

Como hemos visto, WordPress nos ofrece gran flexibilidad a través de los Hooks, en este caso hemos visto cómo usando los Hooks podemos agregar campos adicionales al perfil de un usuario, todo a través de código y evitando el uso de plugins adicionales.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores: