¿Quieres personalizar el CSS para páginas específicas? Añadir el slug de la página principal a body_class es una buena manera de dirigir el CSS a una página específica. De esta forma puedes identificar fácilmente la clase del elemento que quieres cambiar.
Instrucciones:
Todo lo que tienes que hacer es añadir este código al archivo functions.php de tu tema o en un plugin específico del sitio:
add_filter('body_class','body_class_section');
function body_class_section($classes) {
global $wpdb, $post;
if (is_page()) {
if ($post->post_parent) {
$parent = end(get_post_ancestors($current_page_id));
} else {
$parent = $post->ID;
}
$post_data = get_post($parent, ARRAY_A);
$classes[] = 'parent-' . $post_data['post_name'];
}
return $classes;
}
Nota: Si es la primera vez que añade fragmentos de código en WordPress, consulte nuestra guía sobre cómo copiar / pegar correctamente fragmentos de código en WordPress, para no romper accidentalmente su sitio.
Si te ha gustado este fragmento de código, por favor considere revisar nuestros otros artículos en el sitio como: 62 mejores temas gratuitos para blogs de WordPress o 7 mejores plugins para formularios de contacto de WordPress.
Works beautifully in WordPress 3.9.1, thank you!
Can this be adapted to add the top ancestor to the body class? So if I navigate to a grandchild page, I see not the parent slug, but the grandparent slug?
When I use this, I still get all of the BS default classes added by WP. Is there a way to filter those out?
Hi Jess, ill be posting a snippet monday that will provide a solution for this.
Thanks, exactly what I was looking for. One question – could this be adapted so that it outputs not only the parent page slug in the body classes, but also the current page slug as well? This would be useful for targeting sections in CSS, plus specific pages as well.
I write something so can post it in a new few days.
Thanks, looking forward to it 🙂