Como usar body_class para condicionar comportamiento en JS en WordPress

Introducción

En WordPress, la función body_class() es una herramienta sencilla pero extremadamente poderosa para condicionar estilos y comportamientos en JavaScript según la página que se esté viendo. Este artículo explica en detalle cómo aprovechar las clases que genera WordPress en el elemento ltbodygt y cómo añadir clases personalizadas para controlar la carga o inicialización de scripts, mejorar rendimiento y mantener un código limpio y escalable.

Qué hace body_class y por qué es útil

WordPress imprime una lista de clases en el elemento ltbodygt que describen contexto: tipo de página, plantilla, post type, slug, taxonomías, y más. Esa información resulta perfecta para:

• Condicionar la ejecución de scripts según la página (por ejemplo: inicializar un slider sólo en la página de inicio).
• Aplicar estilos CSS específicos sin necesidad de añadir IDs o clases adicionales en plantillas.
• Mejorar rendimiento evitando cargar o ejecutar código innecesario.

Clases comunes que añade WordPress

• home, blog — para la página de inicio o el blog.
• page, page-template-template-name — para páginas y plantillas.
• single, single-post, single-{post_type} — para entradas individuales.
• postid-{ID}, category-slug, tag-slug, etc.

Añadir clases personalizadas con add_filter(body_class)

Si necesitas clases específicas (por ejemplo, has-hero, feature-x-enabled), lo mejor es añadirlas desde functions.php usando el filtro body_class. Ejemplos prácticos a continuación.

Ejemplo: añadir clase si la página usa una plantilla concreta

Ejemplo: añadir clase según campo personalizado

Condicionar comportamiento en JavaScript según clases del body

Una vez que las clases están presentes en el ltbodygt, el JavaScript puede consultarlas con facilidad para decidir si inicializar módulos, cargar recursos o ejecutar lógica específica. A continuación verás patrones seguros y prácticos.

Buenas prácticas antes de comprobar clases

• Encolar scripts con wp_enqueue_script y, si es posible, con defer o async para no bloquear el render.
• Ejecutar comprobaciones después de que el DOM esté listo (DOMContentLoaded) o colocar el script al final del body.
• Preferir clases específicas y predictibles (evitar nombres demasiado genéricos).
• Evitar escribir lógica importante fuera de comprobaciones si la clase no existe, el script no debe romperse.

Ejemplo: encolar script y comprobar clase con JavaScript (vanilla)

// /js/mi-scripts.js (vanilla JS)
document.addEventListener(DOMContentLoaded, function() {
    var body = document.body
    // Inicializar slider solo en la home
    if (body.classList.contains(home)) {
        iniciarSliderHome()
    }

    // Inicializar un script de promoción si existe la clase has-promo
    if (body.classList.contains(has-promo)) {
        inicializarPromocion()
    }

    function iniciarSliderHome() {
        // lógica del slider
        console.log(Iniciando slider en home)
    }

    function inicializarPromocion() {
        // lógica promo
        console.log(Iniciando promo)
    }
})

Ejemplo con jQuery (comprobación y carga condicional)

// /js/mi-scripts-jquery.js
jQuery(function() {
    var body = (body)

    if (body.hasClass(page-template-landing)) {
        // Inicializa solo en la landing
        inicializarLanding()
    }

    function inicializarLanding() {
        console.log(Landing inicializada)
        // Código de inicialización: sliders, animaciones, etc.
    }
})

Ejemplo avanzado: cargar un script externo solo en páginas concretas

En vez de encolar siempre el script, puedes condicionar su encolado desde PHP usando las mismas comprobaciones que generan las clases del body. Esto evita descargar recursos innecesarios.

Encolar condicionalmente desde PHP

Cómo depurar y verificar las clases

Para comprobar qué clases están disponibles:

1. Abre la página en el navegador y usa Inspeccionar elemento para ver el atributo class del ltbodygt.
2. En la consola ejecuta: document.body.className o Array.from(document.body.classList) para verlas como array.
3. Si no ves la clase que añadiste, verifica que la condición PHP se esté cumpliendo y que el filtro se esté cargando (functions.php activo).

Consideraciones de seguridad y buenas prácticas

• No incluir información sensible en clases del body (IDs privados, tokens, datos de usuario). Las clases son visibles en el HTML.
• Sanitiza cualquier dato que conviertas en clase (usar sanitize_html_class() en PHP cuando sea necesario).
• Prefiere no depender únicamente de las clases para seguridad (p. ej. mostrar/ocultar contenido sensible), la autorización debe hacerse en el servidor.
• Usa nombres de clases con prefijo de tema/plugin para evitar colisiones (ej. miTema-landing o pluginX-feature).

Ejemplo de sanitización al añadir clase

Patrones de uso recomendados

• Usar body_class para condicionar la inicialización (no para lógica crítica de negocio).
• Preferir encolar condicionalmente desde PHP cuando sea posible (evita descargar scripts innecesarios).
• Si encolas siempre, usa comprobaciones en JS para no ejecutar módulos que no aplican.
• Mantener una convención de nombres y documentarla dentro del tema/plugin.

Checklist rápido antes de implementar

• ¿Has añadido la clase desde PHP con add_filter(body_class) o confías en las clases nativas?
• ¿Estás encolando scripts condicionalmente o encolando siempre y comprobando en JS?
• ¿Ejecutas la comprobación cuando el DOM está listo o el script está cargado con defer / al final del body?
• ¿Has sanitizado los valores dinámicos usados como nombre de clase?

Ejemplo completo: plantilla, clase y comportamiento

Flujo completo: 1) En functions.php añades clase si la página tiene un slider destacado 2) Encolas script global 3) En JS compruebas la clase y inicializas el slider.

// js/global.js
document.addEventListener(DOMContentLoaded, function() {
    if (document.body.classList.contains(home-has-slider)) {
        // inicializa librería del slider (ya encolada o incluida)
        iniciarSliderPrincipal()
    }
})

function iniciarSliderPrincipal() {
    console.log(Slider principal inicializado)
    // Código de inicialización real...
}

Conclusión

Usar body_class como disparador para condicionar comportamiento en JavaScript es una técnica práctica y escalable: permite separar responsabilidades (PHP decide contexto, JS actúa en consecuencia), reduce carga innecesaria y facilita el mantenimiento. Añade clases con filtros, sanitiza valores y encola scripts correctamente para obtener un flujo eficiente y seguro.

	Acepto donaciones de BAT's mediante el navegador Brave 🙂