Voeg de WordPress page slug toe als body class

Met dit fragment voeg je de page slug toe als een body class. Als de page slug bijvoorbeeld contact is, wordt er een extra body class toegevoegd met de naam page-contact.

Voeg onderstaande snippet toe aan je functions.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

add_filter( 'body_class', 'wpx_add_slug_body_class' );
/**
 * Add Page Slug as Body Class.
 */
function wpx_add_slug_body_class( $classes ) {
	
	global $post;
	
	if ( isset( $post ) ) {

		$classes[] = $post->post_type . '-' . $post->post_name;

	}
	
	return $classes;

}

Met de nieuwe body class kan je de standaardstyling of stijlelementen voor specifieke pagina’s overschrijven.

Wil je nu bijvoorbeeld de kleur van je footer aanpassen op alleen de contact pagina dan ziet je CSS er bijvoorbeeld uit zoals in onderstaand voorbeeld.

.page-contact .site-footer {
  background-color: #000;
  color: #fff;
}