Añadir una clase personalizada al body de WordPress

Añadir una clase al body en WordPress

En muchos casos, las clases generadas automáticamente no son suficientes y puede que necesitemos añadir algunas clases personalizadas.

Para añadir clases personalizadas, usaremos el filtro de WordPress:

1. body_class

A continuación te mostramos fragmentos de los ejemplos más solicitados.

Pero primero, una pequeña introducción para explicar a los principiantes un poco más sobre las clases del body.

Las clases personalizadas del body en WordPress son algo con lo que cualquier desarrollador de WordPress tendrá que lidiar, tarde o temprano.

Usar un plugin para esto sería excesivo, porque en la mayoría de los casos solo necesitamos un par de líneas de código.

Entonces, ¿cómo añadimos clases personalizadas al body en WordPress?

WordPress tiene tanto una función body_class como un filtro body_class (hook).

La función body_class se utiliza en los temas para añadir las clases autogeneradas por WordPress a la etiqueta body de tu sitio web.

Así es como se añade al archivo header.php de tu tema:

<body <?php body_class($class); ?>>

Dependiendo de qué página se visite, WordPress mostrará clases específicas.

1) Para el post predeterminado «Hello World», las clases del body son:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2) Las clases del body de la página de muestra son:

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3) Las clases del body de las páginas de archivo por categoría son:

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4) Las clases del body de la página de archivo de autor son:

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

5) La clase del body de la página de inicio (suponiendo que tengas una)

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

Los 5 ejemplos proporcionados anteriormente son comunes a la mayoría de los temas predeterminados cuando el usuario administrador ha iniciado sesión.

Cuando se cierra la sesión, las clases serán ligeramente diferentes.

Las clases en HTML se usan para dar estilo a una página web mediante CSS.

Al copiar los siguientes fragmentos en tu archivo functions.php, aparecerán nuevas clases personalizadas en el marcado de tu sitio web.

Usaremos el filtro body_class.

Añadir una clase personalizada al body en WordPress

function my_custom_body_class($classes) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class');

Esto añadirá la nueva clase: «my-class» a la etiqueta body de todas las páginas de tu sitio web.

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

¿Qué pasa si necesito añadir más de 1 clase?

Añadir 2 o más clases personalizadas al body en WordPress

function my_custom_body_classes($classes) {<br />
// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
$classes[] = 'my-class-2';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom classes via body_class filter<br />
add_filter('body_class','my_custom_body_classes');

Este será el resultado:

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

¿Qué pasa si quiero añadir una clase al body solo en una página concreta donde deseo agregar un estilo personalizado mediante CSS?

Añadir una clase personalizada al body en una página específica de WordPress

Esto se puede hacer de varias maneras:

1) Añadir una clase personalizada al body usando el ID de la página

function my_custom_body_class_id($classes) {<br />
// add 'my-class' only to page with ID 1.<br />
if ( is_page( '1' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_id');

Este será el resultado en la página con id 2, mientras que el resto de páginas no tendrán la clase personalizada.

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar my-class customize-support">

2) Añadir una clase personalizada al body usando el slug de la página

function my_custom_body_class_slug($classes) {<br />
// add 'my-class' only to page with slug contact-form.<br />
if ( is_page( 'contact-form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_slug');

Esto añadirá la clase personalizada

3) Añadir una clase body personalizada usando el título de la página

function my_custom_body_class_title($classes) {<br />
// add 'my-class' only to page with title Contact Form.<br />
if ( is_page( 'Contact Form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_title');

Esto añadirá la clase personalizada

4) Añadir una clase body personalizada usando la plantilla de página

function my_custom_body_class_template($classes) {<br />
// add 'my-class' only to pages using my custom template.<br />
if ( is_page_template( 'my-custom-page-template' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_template');

Esto añadirá la clase personalizada

También podemos añadir la clase personalizada a una página de categoría o etiqueta, tanto por ID como por slug de categoría/etiqueta.

Añadir una clase body personalizada de WordPress a una categoría o archivo de etiquetas

1) Categorías

function my_custom_body_class_category($classes) {<br />
// add 'my-class' only to the my-category archive.<br />
if ( is_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_category');

2) Etiquetas

function my_custom_body_class_tag($classes) {<br />
// add 'my-class' only to the my-tag archive.<br />
if ( is_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_tag');

Esto solo añadirá la clase body personalizada en la página de archivo de la categoría my-category y la etiqueta my-tag.

También podemos añadir una clase body personalizada a la página individual de cada entrada en la categoría my-category o con la etiqueta my-tag.

Utilizaremos las funciones in_catgeory y has_tag.

1) Categorías (tanto archivo como página individual)

function my_custom_body_class_in_category($classes) {<br />
// add 'my-class' to the my-category archive and single posts of the category.<br />
if ( in_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_in_category');

2) Etiquetas (tanto archivo como página individual)

function my_custom_body_class_has_tag($classes) {<br />
// add 'my-class' to the my-tag archive and single posts with that tag.<br />
if ( has_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_has_tag');

Estos últimos 2 ejemplos añadirán la clase personalizada tanto en la página de archivo como en la página individual.

Añadir el nombre de la categoría como clase body personalizada de WordPress en cada entrada

Si deseas añadir el nombre amigable de la categoría como clase body personalizada en cada entrada, necesitarás el siguiente fragmento de código:

function my_custom_body_class_category_in_single($classes) {<br />
     if (is_single() || is_category()) {<br />
       global $post;<br />
       foreach((get_the_category($post->ID)) as $category) {<br />
         $classes[] = $category->category_nicename;<br />
       }<br />
     }<br />
     return $classes;<br />
   }<br />
add_filter('body_class','my_custom_body_class_category_in_single');

Por ejemplo, si estás visitando una entrada de la categoría

Añadir una clase body personalizada de WordPress cuando se visita desde un dispositivo móvil

Podemos hacerlo fácilmente usando la wp_is_mobile función.

function my_custom_body_class_mobile( $classes ) {<br />
    if ( wp_is_mobile() ) {<br />
        $classes[] = 'mobile';<br />
    }<br />
    return $classes;<br />
}<br />
add_filter( 'body_class', 'my_custom_body_class_mobile' );

Las clases body personalizadas también se pueden añadir a 1 o todas las páginas creadas por un plugin (según el plugin).

GeoDirectory

GeoDirectory añade sus propias clases body personalizadas. Por ejemplo, cada página de GeoDirectory tendrá la clase body: geodir-page.

Si el complemento de búsqueda avanzada y/o el de tipos de entrada personalizados están instalados, se añadirán las clases: geodir_advance_search y geodir_custom_posts respectivamente.

Ejemplo de una página de inicio de GD:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

En las páginas de listados (tipo de entrada personalizado o archivo de categoría) encontrarás una clase diferente para cada Tipo de Entrada Personalizado.

Por ejemplo, en Places habrá post-type-archive-gd_place.

En la página de detalles del listado también encontrarás una clase diferente para cada Tipo de Entrada Personalizado utilizado; por ejemplo, en Places habrá: single-gd_place.

Sin embargo, puede haber ocasiones en que se necesiten otras clases body personalizadas. Veamos algunos ejemplos:

1) Añadir una clase body personalizada a la página de ubicación

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_location_custom_body_class');</p>
<p>function gd_location_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('location')) {<br />
$classes[] = 'gd-location';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

la misma etiqueta condicional

geodir_is_page()

se puede usar para cualquier página de GD, por ejemplo para la página de vista previa:

2) Añadir una clase body personalizada a la página de vista previa del listado

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_preview_custom_body_class');</p>
<p>function gd_preview_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('preview')) {<br />
$classes[] = 'gd-preview';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

3) Añadir una clase body personalizada en la página de detalle para diferentes paquetes de precio

 // add extra custom class via body_class filter<br />
add_filter('body_class','gd_price_custom_body_class');<br />
function gd_price_custom_body_class($classes) {<br />
global $post;<br />
if ( $post->package_id == 1) {<br />
$classes[] = 'price-1';<br />
}<br />
elseif ( $post->package_id == 2) {<br />
$classes[] = 'price-2';<br />
}<br />
else {}<br />
// return the modified $classes array<br />
return $classes;<br />
}

4) Añadir una clase body personalizada en la página de búsqueda para diferentes CPT buscados

add_filter('body_class','gd_search_cpt_custom_body_class');</p>
<p>function gd_search_cpt_custom_body_class($classes) {<br />
if (isset($_GET['stype']) == 'gd_place') {<br />
$classes[] = 'search_gd_place';<br />
}<br />
return $classes;<br />
}

WooCommerce

1) Añadir una clase body personalizada a todas las páginas de WooCommerce

function my_custom_body_class_woo($classes) {<br />
// add 'my-class' to all woocom pages.<br />
if ( is_woocommerce() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo');

2) Añadir una clase body personalizada solo a la página de la Tienda

function my_custom_body_class_woo_shop($classes) {<br />
// add 'my-class' only to the shop page.<br />
if ( is_shop() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_shop');

3) Añadir una clase body personalizada a la página de Categoría de Producto

function my_custom_body_class_woo_cat($classes) {<br />
// add 'my-class' only to the product category archives.<br />
if ( is_product_category() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat');

4) Añadir una clase body personalizada a una página de Categoría de Producto específica

function my_custom_body_class_woo_cat_a($classes) {<br />
// add 'my-class' only to a specific product category archive.<br />
if ( is_product_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) Añadir una clase body personalizada a la página de Producto

function my_custom_body_class_woo_prod($classes) {<br />
// add 'my-class' to product pages.<br />
if ( is_product() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod');

6) Agregar una clase body personalizada a una página de Producto específica

function my_custom_body_class_woo_prod_a($classes) {<br />
// add 'my-class' only to the my-product single page.<br />
if ( is_product( 'my-product' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod_a');

Hay muchas otras etiquetas condicionales de WooCommerce, como

• is_product_tag() para archivos de etiquetas
• is_cart() para la página del carrito de compras
• is_checkout() para la página de pago
• is_account_page() para las páginas de cuenta del cliente

Puedes encontrarlas todas aquí: https://docs.woothemes.com/document/conditional-tags/

Agregar clases body personalizadas de WordPress a páginas generadas por otros plugins

Lo mismo se puede hacer con cualquier plugin que ofrezca etiquetas condicionales.

Por ejemplo, puedes encontrar las etiquetas condicionales de bbPress aquí: https://codex.bbpress.org/bbpress-conditional-tags/

¿un ejemplo?

1) para agregar una etiqueta body personalizada a todas las páginas de bbPress necesitarás esto:

function my_custom_body_class_bbpress($classes) {<br />
// add 'my-class' only to bbpress page.<br />
if ( is_bbpress() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_bbpress');

También encontrarás etiquetas condicionales para BuddyPress y la mayoría de los mejores plugins disponibles.

Eliminar clases body

Así como puedes agregar algo mediante filtros, también puedes eliminarlo:

function remove_body_class( $classes ) {</p>
<p>foreach ( $classes as $key =&amp;amp;gt; $value ) {<br />
if ( $value == 'my-class' ) unset( $classes[ $key ] );<br />
}</p>
<p>return $classes;</p>
<p>}<br />
add_filter( 'body_class', 'remove_body_class' );

¿Tienes problemas para agregar o eliminar clases body en tu sitio WordPress? ¡Pide un ejemplo específico en un comentario a continuación y haré todo lo posible por proporcionarlo!