WordPress Custom Post Types als CSS-Klasse im Frontend nutzen

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 13 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

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.

Von Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.