Geef de hoofd- (of parent/top) categorieën op je site een body class

Soms wil je dat bepaalde sub- (of child/ancestors) categorieën dezelfde  stijl krijgen als de hoofd- (of parent/top) categorie. Je kan dit doen door voor elke categorie een ander template te maken maar dat is niet handig als men later nog nieuwe categorieën wilt toevoegen. Het zou betekenen dat elke keer als er een nieuwe sub-(of child/ancestors)categorie gemaakt wordt men nieuwe css code moet toevoegen. Naast het feit dat je enorm veel css code krijgt kan niet elke WordPress gebruiker  overweg met css. Een oplossing hiervoor kan zijn om de sub -(of child/ancestors) categorieën dezelfde bodyclass te geven als de hoofd-(of child/ancestors) catergorie.
Hoe doe je dat?

Kopieer de onderstaande tekst in je function.php

// Add specific CSS class by filter
add_filter('body_class','top_cat_body_class');

function top_cat_body_class($classes) {
if( is_single() ) :
	global $post;
	$cats = get_the_category( $post->ID );
	if( count( $cats ) > 1 ) {
		return array('genericClass');
	}
	else {
		$cat_anc = get_ancestors( $cats[0]->term_id, 'category' );
		$top_cat = array_merge( array($cats[0]->term_id), $cat_anc );
		$top_cat = array_pop( $top_cat );
		return array(get_category($top_cat)->slug);
	}
elseif( is_category() ) :
	$cat_anc = get_ancestors( get_query_var('cat'), 'category' );
	$top_cat = array_merge( array(get_query_var('cat')), $cat_anc );
	$top_cat = array_pop( $top_cat );
	return array(get_category($top_cat)->slug);
else :
	return $classes;
endif;
}

En in de css geef je de hoofd/parent catergorie een stijl.
Op deze site is daar een voorbeeld van te zien:
Er is een hoofd- (top/parent) categorie “leren-begrijpen”.
Hieronder zitten sub – (of child/ancestors) categorieën. Een daarvan is “videos”.

Nu wilde ik dat de pagina’s in de catergorie “videos” dezelfde stijl hadden als de catergorie “leren-begrijpen”. In de css heb ik de categorie “leren-begrijpen” een blauwe balk toegewezen.
Het doel is dat alle sub – (of child/ancestors) categorieën zoals de hoofd- (top/parent) categorie “leren-begrijpen” een blauwe balk krijgen.

Als je op het menu item “Video’s” klikt dan zie je ook op deze pagina  een blauwe balk ook al is dit eigenlijk de categorie”videos”.

Dit komt doordat je de hoofd- (top/parent) categorie “leren-begrijpen” hebt toegewezen aan alle sub – (of child/ancestor) categorieën.

In de style.css heb ik dus geschreven:

body.leren-begrijpen h1 (background-color:bleu;}

Door in de broncode te kijken kun je zien of het gelukt is.

Als het goed is zul je op een pagina als “videos” zien dat de body class =leren-begrijpen.
En dat op die pagina het article class=videos heeft.

Let op! Gebruik je in je function.php ook de body class voor single pages en posts middels “custom fields” zorg er dan voor dat deze code VOOR de bovenstaande code wordt geplakt in je function.php.