Cómo añadir atributos y clases al body de WordPress

Vamos a ver como añadir atributos y clases CSS al body de WordPress. Es un método que uso en muchas de mis páginas web y te lo recomiendo. Sobre todo te pude ser útil cuando necesites personalizar estilos en tu web. 

Porque te lo recomiendo:

• Tienes una clase como selector css de superior para modificar más fácil los estilos de temas y plugins.
• Puede evitarte el uso de la propiedad de css ! important, sólo recomendable cuando no hay más remedio.

Los atributos por otra parte son útiles para:

• Añadir algún tipo de información a la etiqueta HTML.
• Algunas librerías pueden necesitar un atributo en la etiqueta body

Si WordPress lo hace, tu tema lo hace y tú también lo puedes hacer

Puedes velo con las herramientas de desarrollador de Chrome (F12). En la etiqueta veras una gran variedad de clases que son inyectadas por WordPress, tu tema y tus plugins.

Entonces tú también puedes 🙂

Para esto disponemos de la función body_class()

Cómo añadir clases css a la etiqueta boby de WordPress

Como siempre recomiendo instalar el plugin Code Snippets. Si no sabes qué hace este plugin tienes un artículo y video de cómo usar Code Snippets.

La función que necesitamos es la que ves a continuación. Esta función lo que va ha hacer es añadir una clases a la etiqueta body en todas las páginas del sitio web.

/**
 * Añade una clase a la etiqueta body. 
 * Esta clases estara presente en todo el sitio web.
 */
function rv_site_body_class($wp_classes, $classes)
{

    $post = get_post();

    //Esta clase CSS estara presente en todo el sitio web
    $classes[] .= 'mi-clase';

    return array_merge($wp_classes, (array)$classes);
}

add_filter('body_class', 'rv_site_body_class', PHP_INT_MAX, 2);

Tambien podemos añadir una diferente con la ayuda de las etiquetas condicionales que incluye WordPress.

is_page() Cuando queremos añadirla al body de las páginas.

 // Clase CSS para todas las páginas
    if (is_page()) {
        $classes[] = 'clase-todas-paginas';
    }

is_singular() Cuando queremos añadirla a las entradas o entradas personalizadas, los famosos CPT.

 // Clase CSS para post y post personalizados CPT
    if (is_singular()) {
        $classes[] = 'clase-post';
    }

Podemos unirlo todo en una solo función y entonces aplicar diferentes clases según el tipo de contenido.

/**
 * Añade una clase a la etiqueta body.
 * La primera estará presente en todo el sitio web, 
 * la segunda solo en a las páginas y la tercera 
 * en a las entradas y entradas personalizadas(CPT)
 */
function rv_content_type_body_class($wp_classes, $classes)
{
    $post = get_post();


    //Clase CSS para todo el sitio web
    $classes[] .= 'mi-clase';


    // Clase CSS para las páginas
    if (is_page()) {
        $classes[] = 'clase-paginas';
    }


    // Clase CSS para post y post personalizados CPT
    if (is_singular()) {
        $classes[] = 'clase-posts';
    }


    return array_merge($wp_classes, (array)$classes);
}

add_filter('body_class', 'rv_content_type_body_class', PHP_INT_MAX, 2);

El resultado final se puede ver en la siguiente imágen.

Añadir atributos a la etiqueta body de WordPress

El snippet para añadir atributos es muy parecido al anterior con solo algunos pequeños cambios.

/**
* Añade un atributo personalizado a la
* etiqueta body de WordPress
*/
function rv_site_schema_org($wp_classes, $schema)
{
    $schema[] = '" data-spy="scroll';
    
    return array_merge($wp_classes, (array)$schema);
}
add_filter('body_class', 'rv_site_schema_org', PHP_INT_MAX, 2);

Nota: Fíjate en las comillas al introducir el atributo, asegúrate de ponerlas tal y como están en el ejemplo de arriba.

La siguiente imagen se muestra el resultado de la función.

Y eso es todo amigos, ¿Te ha salido? ¿Algo te falla? ¡coméntame y te echo una mano, nos vemos la próxima!

Rubén Veliz

Diseñador web freelance especializado en páginas web a medida, escalables y fáciles de administrar. Utilizo WordPress de forma exclusiva desde hace más de 6 años. Quiero compartir con vosotros la experiencia de emprender y el apasionante mundo de WordPress.