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
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:
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:
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.
Ver comentarios (35)
Hola,
La información insertada en el campo personalizado se agrega a alguna tabla en la base de datos?
Hola, si, claro, se guarda en la tabla wp_usermeta. Saludos.
Hola, muy bien explicado.
Tengo un problema que no se como añadir los campos adicionales en la página /mi-cuenta/edit-account/ y que el cliente lo pueda modificar.
Graciass
Hola, supongo que estas usando un plugin en donde tienes la gestión de usuarios, como WooCommerce, sería interesante para un futuro artículo, de momento puedes revisar: https://es.wordpress.org/plugins/add-fields-to-checkout-page-woocommerce/
como puedo agregar un select de una base de datos , mostrarlo y agregarlo a la base de datos metauser
Hola, es algo muy particular, podrías tomar como base la opción de "Agregando campos adicionales en una nueva sección", verás que tienes la flexibilidad de agregar el select como HTML, y podrías construirlo dinámicamente con datos desde tu base de datos.
No tienes un ejemplo , que me puedas brindar . Te lo agradecería
Hola, si te dificulta hacerlo por código prueba hacerlo con un plugin, revisa: https://es.wordpress.org/plugins/profile-extra-fields/
Saludos
Hola Jhon
buenos dias
excelente pagina y trabajo el que haces,
es imposible no aprender algo :)
Queria consultarte lo siguiente:
En la "Agregar nuevo Producto" y mediante codigo, se puede eliminar algunas cosas de la caja
de los datos del producto?
quisiera eliminar :
atributos
avanzado
productos relacionados
envio
que en el desplegable solo quede producto simple
y solo quede el chek de virtual,
o sea que quede bien sencillita esa caja
es posible?
habria algun codigo para deshabilitar esos items? o algo asi?
desde ya muchisimas gracias
un abrazo!
Marcelo
Hola, si te refieres a WooCommerce puedes revisar: https://decodecms.com/modificar-elementos-en-pagina-de-producto-de-woocommerce/
Hola!
Cómo puedo agregar un campo a la nueva sección a parte del que ya hemos incluido?
Gracias!
Hola, simplemente agrega en la sección de fila de la tabla tu nuevo campo, <tr> </tr>
También valida la condicional para el campo en la función de grabar_campos_seccion(). Saludos.
Hola, antes que nada, felicitaciones por tan buen articulo, muy claro y conciso, pero me gustaría saber cual es el Hook especifico para agregar campos en la sección "Acerca del usuario" no en la "Información de contacto", o donde podría ver una lista completa de los Hooks para este apartado de Perfil de Usuarios. De antemano mil gracias.
Hola, gracias John.
Busca en el archivo: wp-admin/user-edit.php , allí deberían estar los Hooks para las diferentes secciones.
hola como estas, si deseo cambiar el campo "información biografica" que se encuentra en el perfil del usuario, cual es el hook que debería utilizar?, gracias
Hola, revisa el archivo user-edit.php, https://core.trac.wordpress.org/browser/tags/5.5/src//wp-admin/user-edit.php
Hola! como podría poner los nuevos campos personalizados que he agregado en una página de lectura para el usuario?
Hola, cada usuario tiene una página de autor, podrías modificar/crear la página author.php de tu theme, según: https://decodecms.com/jerarquia-de-archivos-de-plantilla-en-wordpress/
¡Hola!
¡Excelente artículo! Yo quiero añadir un par de campos, al formulario de registro de clientes en WooCommerce. Uno sería a través de radio buttons que permitiera al cliente registrarse como particular o como empresa/autónomo, para que posteriormente se aplicara el IRPF o no definido en los ajustes de WooCommerce. Estos datos tendrían que estar presentes el página de "Mi cuenta" y en "Finalizar compra". Tendría que tener también una checkbox para marcar de manera opcional si está sujeto a criterio de caja.
En la página de "Finalizar compra" tendría que incluir un campo obligatorio para el DNI/NIF.
Estos datos a su vez tendrían que estar presentes en las facturas que se generen. Estoy utilizando un child theme del tema Storefront y para gestionar las facturas utilizo el pluging "WooCommerce pdf invoices and packing slips".
Quiero hacer todo esto mediante código, así no dependería de plugins. ¿Cómo puedo hacerlo? ¿Sería seguro? ¿Tendría que realizar algún tipo de mantenimiento del código? Muchas gracias de antemano.
Un saludo :)
Hola, lo que comentas implica varios Hooks adicionales a los que comento en este artículo. Si que podrías hacerlo por código, sin embargo creo que lo más práctico en tu caso sería evaluar buscar un plugin, precisamente porque implica mucho código sería mejor centralizarlo, sino encuentras un plugin podrías usar código igual pero con un plugin personalizado.