Ancestor CSS klasse voor aangepaste links

Als WordPress ontwikkelaar ben je er vast en zeker een keer tegen aan gelopen. Je voegt aan een menu een aangepaste link toe om naar een specifieke WordPress taxonomie archief te linken. Vervolgens wordt dit menu item niet als actief getoond wanneer je op een bericht uit dit archief zit.

WordPress ontwikkelaar Karel-Jan Tolsma van Pronamic heeft een aantal maanden terug een oplossing voor bedacht voor dit probleem: “Menu active state fix voor WordPress“. Deze oplossing heeft echter als nadeel dat je specifieke ID’s van menu items moet verwerken in je thema functies bestand. Verwijder je een menu item en voeg je later een nieuwe toe dan zal er ook weer geprogrammeerd moeten worden.

Om die reden hebben we een betere oplossing bedacht.

function prefix_nav_menu_css_class($classes, $item) {
	if($item->type == 'custom') {
		$isAncestor = strncmp(get_permalink(), $item->url, strlen($item->url)) == 0;
		$isHome = untrailingslashit($item->url) == home_url();

		if($isAncestor && !$isHome) {
			$classes[] = 'current-url-ancestor';
		}
	}

	return $classes;
}

add_filter('nav_menu_css_class', 'prefix_nav_menu_css_class', 10, 2);

Je kunt vervolgens in je CSS bestand de klasse ‘.current-url-ancestor’ gebruiken om bovenliggende menu items helemaal naar eigens wens te stylen.

Let op: bij het invoeren van een aangepaste link binnen WordPress dient een volledige absolute URL gebruikt te worden, bovenstaand script zal niet functioneren wanneer een relatieve URL wordt gebruikt (update 18 augustus 2011).