• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Agregar campos adicionales al perfil de usuario

Agregar campos adicionales al perfil de usuario

Agregar campos adicionales al perfil de usuario

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

dashboard mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar notificaciones por usuario en la administración de wordpressMostrar notificaciones por usuario en la administración de WordPress
  • html al final de url WordPressAgregar .HTML al final de URL en WordPress
  • Heartbeat API de WordPress, aprende a configurarlaHeartbeat API de WordPress, aprende a configurarla
  • Transients en WordPressCómo usar Transients en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Erick

    16 mayo, 2019

    Hola,

    La información insertada en el campo personalizado se agrega a alguna tabla en la base de datos?

    • Jhon Marreros Guzmán

      17 mayo, 2019

      Hola, si, claro, se guarda en la tabla wp_usermeta. Saludos.

  2. Montse

    11 junio, 2019

    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

    • Jhon Marreros Guzmán

      11 junio, 2019

      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/

  3. milet johana

    27 abril, 2020

    como puedo agregar un select de una base de datos , mostrarlo y agregarlo a la base de datos metauser

    • Jhon Marreros Guzmán

      28 abril, 2020

      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.

  4. milet

    28 abril, 2020

    No tienes un ejemplo , que me puedas brindar . Te lo agradecería

    • Jhon Marreros Guzmán

      28 abril, 2020

      Hola, si te dificulta hacerlo por código prueba hacerlo con un plugin, revisa: https://es.wordpress.org/plugins/profile-extra-fields/
      Saludos

  5. Marcelo

    1 mayo, 2020

    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

    • Jhon Marreros Guzmán

      5 junio, 2020

      Hola, si te refieres a WooCommerce puedes revisar: https://decodecms.com/modificar-elementos-en-pagina-de-producto-de-woocommerce/

  6. Laura

    5 junio, 2020

    Hola!

    Cómo puedo agregar un campo a la nueva sección a parte del que ya hemos incluido?

    Gracias!

    • Jhon Marreros Guzmán

      5 junio, 2020

      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.

  7. John E. Gonzalez

    15 julio, 2020

    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.

    • Jhon Marreros Guzmán

      16 julio, 2020

      Hola, gracias John.
      Busca en el archivo: wp-admin/user-edit.php , allí deberían estar los Hooks para las diferentes secciones.

  8. eduar rivera

    23 agosto, 2020

    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

    • Jhon Marreros Guzmán

      25 agosto, 2020

      Hola, revisa el archivo user-edit.php, https://core.trac.wordpress.org/browser/tags/5.5/src//wp-admin/user-edit.php

  9. Paola

    1 septiembre, 2020

    Hola! como podría poner los nuevos campos personalizados que he agregado en una página de lectura para el usuario?

    • Jhon Marreros Guzmán

      2 septiembre, 2020

      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/

  10. Carmen

    8 octubre, 2020

    ¡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 🙂

    • Jhon Marreros Guzmán

      9 octubre, 2020

      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.

  11. Erick

    23 noviembre, 2020

    Hola buen articulo, me funciono agregue un campo personalizado pero por ejemplo usando woocomerce cuando agrego al perfil del cliente unos datos especiales se almacena correctamente pero no carga en la parte cuando quiero generar un pedido.

    • Jhon Marreros Guzmán

      26 noviembre, 2020

      Hola, espero hacer posteriormente un artículo para aplicarlo con WooCommerce. Saludos.

  12. Patricio Asencio

    11 diciembre, 2020

    Hola, tengo la siguiente consulta, hice el primer ejercicio y me resulto sin problemas, de echo inclui dos campos, pero al momento de exportar los datos en archivo CSV, estos campos no aparecen. ¿Será que tendre que crear a su vez dos campos adicionales en la BD?

    • Jhon Marreros Guzmán

      12 diciembre, 2020

      Estos campos adicionales son almacenados como metadata del usuario, en tu plugin de exportación revisa si tienes la opción de exportar metadata.

  13. Juan Sebastian Gómez

    12 julio, 2021

    Buenas tardes, estoy muy agradecido por compartir tu conocimiento, ha sido de gran ayuda. Actualmente puse en práctica lo que compartiste y tengo tres campos que aceptan texto para ingresar un nuevo dato a la información del usuario.
    Estaría muy agradecido si puedieras explicarme como utilizar un elemento de tipo “select” para que por medio de un dropdown menu se pueda seleccionar una entre varias opciones predefinidas. Estaré atento a alguna respuesta. Le deseo un buen día

    • Jhon Marreros Guzmán

      16 julio, 2021

      Hola, sería similar, en lugar de construir un “input” HTML construirás un “select”, https://developer.mozilla.org/es/docs/Web/HTML/Element/select, lo único que tienes que considerar es el elemento seleccionado puedes usar la función “selected()” de WordPress que te facilita el trabajo, revisa los ejemplos de esta función: https://developer.wordpress.org/reference/functions/selected/

  14. RODOLFO SEALES POSADA

    21 marzo, 2022

    Hola, Jhon, como estas? Podrias explicarme como podria agregar mas campos necesitados, para agregar a el perfil de el usuario en este codigo y como se podria recuperar, por ejemplo para mostrar en algunas paginas de aterrizajes y de ser posible si se puede guardar en estos campos, parametros para ser usados como enlaces de esas paginas de aterrizajes de manera dinamica. por ejemplo, que el boton de whtsapp, se pueda personalizar en la pagina de aterrizaje y con solo agregar en el campo phone, osea telefono, el boton de whatsapp pueda redireccionar para funcionar con whatsapp. quedoa tentoa tu comentario. muchas gracias.

    • Jhon Marreros Guzmán

      22 marzo, 2022

      Hola, para lo que comentas, respecto al perfil de usuario en el front-end, tal vez debas evaluar un plugin ya que hay mucho código involucrado, revisa: https://wordpress.org/plugins/ultimate-member/ ,este plugin también debe permitirte agregar campos. Para lo de Whatsapp, revisa el siguiente artículo de referencia: https://decodecms.com/agregar-whatsapp-wordpress-sin-usar-plugins/

  15. Rodrigo

    25 mayo, 2022

    Hola, Jhon a partir de lo que expones, favor tu orientación para un sitio de WP + Woo:
    Para una “cuenta_principal” creo nuevos campos, que contendrá “cuentas_secundarias”, es decir, correos de “n” usuarios vinculados. Tras ello, las “cuentas_secundarias” podrían realizar sus pedidos, pero SOLO la “cuenta_principal” consolidará y pagará los pedidos. Es un típico caso de subcuentas. Existe algún un plugin que resuelva esto o derechamente se debe programar en Woo?
    Lamentablemente no encontré la 2da parte en donde mencionas que podrías detallar como agregar campos en Woo (woocommerce), Muchas Gracias

    • Jhon Marreros Guzmán

      25 mayo, 2022

      Hola, veo que existe un plugin de funcionalidad de subcuentas que podrías evaluar: https://woocommerce.com/es-es/products/subaccounts-multi-user-accounts/

      • Rodrigo

        27 mayo, 2022

        Gracias Jhon efectivamente estoy viendo esa alternativa, que es de pago, pero NO consolida los pedidos, mas bien los presenta por cada usuario agrupado (según la documentación). En tal caso, estoy revisando la opción de poder generar el pedido, tal que el pago pueda ser realizado por OTRO cliente.
        Caso práctico: Una familia va a un restaurant, y cada comensal elige lo que consumirá, de acuerdo a sus preferencias, pero finalmente, sólo UNO es el que paga la cuenta. En suma, lo que interesa es que el sitio web, NO pierda el registro de que fue lo que ordenó cada cliente, independiente de quien haya pagado la orden.
        Sé que esto escapa al ámbito de este Tutorial, y si consideras que es así, de antemano te pido sinceras disculpas. Por otro lado, si recuerdas de un plugin, que resuelva lo expuesto, te agradeceré sobremanera tu orientación incluso a mi correo, si es que consideras que esto no enriquece el debate del tutorial. Nuevamente Gracias!

  16. Juan Manuel Rodriguez

    27 junio, 2022

    Hola Jhon como estas? Espero que bien. Estoy utilizando este post de guia para agregar campos y metadatos a usuarios.
    Estoy un poco bloqueado, quiero agregar una sección para agregar una foto (jpg o png) asociado a cada usuario(como un logo o una foto personal).
    Estoy investigando un poco en la documentación de WP y encontré algunas funciones pero no se cual es la correcta a utilizar y cómo hacer que estén “enlazadas” con el id del usuario.

    _wp_handle_upload();
    wp_handle_upload();
    wp_insert_attachment();
    media_handle_upload();

    Si tienes algún consejo que me pueda orientar te agradeceria mucho ! saludos

    • Jhon Marreros Guzmán

      7 septiembre, 2022

      Hola WordPress tiene la funcionalidad de Gravatar para mostrar la imagen del usuario de acuerdo al correo, no te sirve esta opción?, de todas formas te dejo un artículo relacionado que podría servirte: https://decodecms.com/subir-archivos-en-wordpress-a-traves-de-codigo/

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Limitar a los autores a ver su propio contenido en WordPress

Optimizar la carga de imágenes con Lazy Load

Leer datos desde una API externa en WordPress

Agregar Microdatos en campos de productos en WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados