Ocultar elementos del admin bar con CSS

css marzo 11, 2026

Permite ocultar la barra de administración de WordPress o elementos específicos de ella usando CSS. Útil para limpiar la interfaz de usuarios con roles limitados o para personalizar el admin de cara al cliente.

Casos de uso: ocultar la barra a suscriptores o clientes, eliminar el logo de WordPress, limpiar el admin antes de entregar un sitio, white label para agencias.

/* Ocultar la admin bar completa para suscriptores */
body.logged-in.role-subscriber #wpadminbar {
    display: none !important;
}

body.logged-in.role-subscriber {
    margin-top: 0 !important;
}

/* Ocultar elementos específicos para todos los usuarios */
#wpadminbar #wp-admin-bar-wp-logo,
#wpadminbar #wp-admin-bar-comments {
    display: none !important;
}

body.logged-in.role-subscriber — WordPress añade estas clases automáticamente al <body> según el estado y rol del usuario.
margin-top: 0 — WordPress añade un margen superior al body para compensar la altura de la barra; hay que eliminarlo también.
#wp-admin-bar-wp-logo — ID del elemento del logo de WordPress en la barra. Cada elemento tiene su propio ID inspeccionable.
!important — Necesario para sobreescribir los estilos inline que WordPress aplica a la barra.