Voeg pagina slug toe als body class

In deze blogpost zullen we een nuttige WordPress-functie bekijken die het mogelijk maakt om de pagina-slug (URL-fragment) toe te voegen aan de body classes van je website. Dit kleine stukje code kan je helpen om gerichte stijlen toe te passen of aangepaste JavaScript-functies te implementeren voor specifieke pagina’s op je WordPress-website.

De Functie Gebruiken

1. Open je favoriete code-editor en navigeer naar het functions.php bestand van je WordPress-thema.
2. Plak de onderstaande code in het functions.php bestand, bij voorkeur onderaan, onder andere aangepaste functies.
3. Sla het bestand op en upload het terug naar je server.

add_filter( 'body_class', 'wpx_add_page_slug_to_the_body' );
/**
 * Add Page Slug to Body Classes
 *
 * @param array $classes An array containing the classes already added to the body element.
 * @return array Modified array of classes with added post type and post name class.
 */
function wpx_add_page_slug_to_the_body( $classes ) {
	// Check if the global $post variable is set and available.
	global $post;
	
	// Verify if the $post variable holds information about the current page or post.
	if ( isset( $post ) ) {
		// Extract the post type and post name, then concatenate them with an underscore.
		$new_class = $post->post_type . '_' . $post->post_name;
		
		// Add the new class to the array of body classes.
		$classes[] = $new_class;
	}
	
	// Return the modified array of classes.
	return $classes;
}

De functie zal nu automatisch worden uitgevoerd wanneer WordPress de 'body_class' filter hook aanroept. Elke keer dat een pagina wordt geladen, wordt de pagina-slug van de huidige pagina aan de body classes toegevoegd. Hierdoor kun je specifieke stijlen of JavaScript-functies toepassen op basis van de huidige pagina.

Conclusie

Het toevoegen van de pagina-slug aan de body classes van je WordPress-website kan een handige manier zijn om gerichte stijlen of gedrag te implementeren. Met de wpx_add_page_slug_to_the_body functie kun je je website verder aanpassen en specifieke elementen onderscheiden op basis van de huidige pagina. Zo kun je een geavanceerdere en gepersonaliseerde website creëren voor jou en je gebruikers.