• Spring naar de hoofdnavigatie
  • Door naar de hoofd inhoud
  • Spring naar de eerste sidebar

WPX - WordPress Expert

WordPress Development, Onderhoud & Hosting

  • WordPress Website
  • Woocommerce webshop
  • WordPress Onderhoud
  • WordPress Hosting
  • Portfolio
  • Over
  • Contact

Voeg de WordPress page slug toe als body class

Home / Code Snippets & Tutorials / WordPress / 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.

Voeg page slug toe als body class

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;
}

Over Frank Schrijvers

Hey! Ik ben Frank, digitale duizendpoot en fulltime WordPress developer. Ik ben het hart en de ziel van WPX. Ik ontwikkel maatwerkwebsites, managed WordPress websites en zorg voor supersnelle hosting.

sidebar

sidebar-alt

Wordpress of Woocommerce hulp nodig?

Wil jeje website aanpassen of een nieuwe site laten ontwikkelen?

Contact opnemen
  • Over WPX
  • Code & Tutorials
  • Algemene voorwaarden
  • Privacy policy
  • Password Generator
  • MD5
  • Contact

© 2022 · WPX · vermelde prijzen zijn exclusief BTW.

Deze website gebruikt cookies om je gebruikservaring te optimaliseren en om webverkeer te analyseren. Lees meer