Cómo ocultar partes de tu sitio WordPress con CSS (guía para principiantes)

En WordPress, a veces nos encontramos con secciones en el sitio que no queremos mostrar: formularios innecesarios, banners del tema, cajas de comentarios, entre otros. Cuando el tema o plugin no ofrece una forma de desactivar estas secciones desde sus ajustes, una solución muy práctica es ocultarlas usando CSS.

Este método es rápido, reversible y no requiere conocimientos avanzados de programación. En esta guía para principiantes aprenderás:

1. Cómo identificar el elemento que deseas ocultar usando las herramientas de Chrome.
2. Cómo escribir el CSS correcto.
3. Dónde colocar ese CSS en tu instalación de WordPress.

Paso 1: Identificar la clase o ID del elemento

Primero necesitas identificar el nombre del elemento que quieres ocultar. Para eso, usaremos las herramientas de desarrollo del navegador Google Chrome:

1. Abre tu sitio web en Chrome.
2. Haz clic derecho sobre el elemento que deseas ocultar y selecciona «Inspeccionar«.
3. Se abrirá una vista dividida con el código HTML. Al mover el cursor sobre los elementos en el inspector, verás que se resaltan las partes correspondientes del sitio.
4. Identifica si el elemento tiene un ID (id="algo") o una clase (class="algo").

¿Qué conviene más: ID o clase?

• ID (#algo): Es único en la página. Es la opción más precisa y segura, ya que no se repite en otros lugares.
• Clase (.algo): Puede aplicarse a varios elementos. Úsala con precaución porque podrías ocultar más contenido del que esperas.

<div id="promo-banner" class="anuncio destacado">

Lo ideal sería usar #promo-banneren lugar de .anuncio, ya que el ID es único.

Paso 2: Escribir el código CSS

Ahora que conoces el selector (ID o clase), puedes escribir la regla CSS para ocultarlo.

#promo-banner {
    display: none;
}

O con una clase:

.anuncio {
    display: none;
}

Si el estilo no se aplica correctamente, puedes agregar !importantpara forzarlo:

.anuncio {
    display: none !important;
}

Alternativa:

Existe otra propiedad CSS llamada visibility: hidden, pero no se recomienda para este caso. Aunque oculta el elemento visualmente, sigue ocupando espacio en la página.

#promo-banner {
    visibility: hidden;
}

Esto puede dejar huecos o afectar el diseño del sitio. Por eso, display: nonees la mejor opción en la mayoría de los casos.

Paso 3: ¿Dónde colocar el CSS?

Tienes varias formas de agregar este CSS a tu sitio WordPress, según tu nivel de experiencia. Aquí te mostramos las más comunes:

Opción A: Usar el personalizador de WordPress

Ideal si no quieres instalar nada adicional y buscas una solución rápida.

1. Ve a Apariencia > Personalizar.
2. Ingresa a la sección CSS adicional.
3. Pega tu código.
4. Haz clic en Publicar.

Opción B: Usar un plugin de snippets

Si prefieres mantener tus personalizaciones organizadas sin modificar archivos del tema, puedes usar un plugin como WPCode.

1. Instala el plugin WPCode – Insert Headers and Footers + Custom Code Snippets.
2. En el panel de WordPress, ve a Código Snippets > Agregar nuevo.
3. Selecciona el tipo de código CSS.
4. Pega tu código y activa el snippet.

Opción C: Agregarlo al archivo style.cssde tu tema hijo

Si estás utilizando un tema hijo (child theme), puedes colocar el CSS directamente en su archivo style.css.

1. Ve a Apariencia > Editor de archivos del tema.
2. Selecciona style.css del tema hijo.
3. Pega tu código al final del archivo y guarda.

Opción D: Usar un mu-plugin con wp_head.

Si prefieres una solución más técnica y reutilizable, puedes crear un mu-plugin (must-use plugin) para insertar tu CSS desde PHP usando el hook wp_head.

1. Crea la carpeta wp-content/mu-plugins/ si no existe.
2. Dentro, crea un archivo llamado custom-css.php.
3. Pega este contenido:

   • <?php
     add_action( 'wp_head', function () {
         echo '<style>
             #promo-banner {
                 display: none !important;
             }
         </style>';
     } );
     

4. Guarda el archivo. WordPress lo cargará automáticamente.

Ocultar secciones con CSS es una excelente forma de tener control visual sobre tu sitio sin complicarte con código. Solo necesitas:

• Identificar el ID o clase del elemento.
• Escribir un simple display: none.
• Agregarlo en el lugar adecuado dentro de WordPress.

Este pequeño truco puede ayudarte a resolver rápidamente situaciones comunes sin depender de un desarrollador.