Você deseja personalizar o CSS para páginas específicas? Adicionar o slug da página pai ao body_class é uma ótima maneira de direcionar uma página específica com CSS. Dessa forma, você pode identificar facilmente a classe do elemento que deseja alterar.
Instruções:
Tudo o que você precisa fazer é adicionar este código ao arquivo functions.php do seu tema ou em um plug-in específico do site:
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;
}
Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como copiar/colar corretamente trechos de código no WordPress para não danificar seu site acidentalmente.
Se você gostou desse snippet de código, considere dar uma olhada em nossos outros artigos no site, como: 62 melhores temas de blog gratuitos do WordPress ou 7 melhores plugins de formulário de contato do 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 🙂