WordPress Custom Post Types als CSS-Klasse im Frontend nutzen

Um die Inhalte, welche über Custom Post Types eingebracht werden, im Frontend eventuell anders zu gestalteten, kann man sich diesen Typ als Klasse in den body-Tag holen und damit via CSS einfach darauf zugreifen.

Die Möglichkeit in WordPress eigene Post-Types einzubringen erfreut sich wachsender Beliebtheit und kann so manche Arbeit vereinfachen - wichtig ist, dass man im Vorfeld die Anforderungen exakt bewertet und die Möglichkeiten einschätzt. Aber darum soll es in diesem kleinen Beitrag nicht gehen - ich möchte kürz eine Lösung zeigen, die den oder die neuen Post Typen in das Frontend bringt, um die neuen Typen mittels CSS anzusprechen.

Im Grunde wird lediglich die Funktion body_class() von WordPress erweitert um die eigenen Post Types, so dass man sie übergeordnet ansprechen kann und das Design entsprechend gestaltet.
Gleiches hatte ich schon in einem anderen Beitrag ausführlicher erläutert, wo der Titel eines Beitrags in diese Funktion übernommen wurde; daher dort bitte die Zusatzinformationen abholen.


// Adds classes for custom post types to body_class() and post_class()
function fb_add_body_class( $class ) {
	$post_type = 'my_example_post_type'; // der Post Type

	if ( get_query_var('post_type') === $post_type ) { // nur wenn der Post Type aktiv ist, dann erweitern
		$class[] = $post_type;
		$class[] = 'type-' . $post_type;
	}

	return $class;
}
add_filter( 'body_class', 'fb_add_body_class' );

Alternativ kann man auch die post_class() Funktion erweitern um die Klasse des Custom Post Type nicht direkt am body-Tag zu haben. Dazu verwende ich die gleiche Funktion und es muss lediglich der Hook für die post-Klassen angesprochen werden.


add_filter( 'post_class', 'fb_add_body_class' );

Beide Template Tags werden im HTML-Tag verwendet, wie auch die verlinkten Codex-Seiten aufzeigen; bzw. ein Beispiel für die Post-Klasse:


<div <?php post_class('class-name'); ?>>

Viel Freude beim austesten und nutzen. Die Kommentarfunktion steht wie immer für Verbesserungen und Diskussion offen.

Kommentare sind geschlossen.