Extra CSS class voor de WordPress WYSIWYG editor

WordPress maakt standaard gebruik van de TinyMCE JavaScript WYSIWYG editor. Binnen deze editor kunnen gebruikers standaard niet elementen classificeren. Om toch bepaalde elementen te voorzien van een andere opmaak is het classificeren van elementen soms wel erg handig. In dit bericht beschrijf ik hoe je er voor kunt zorgen dat gebruikers eenvoudig elementen kunnen classificeren.

Ik zal als voorbeeld de klasse “Intro” beschikbaar maken binnen de TinyMCE WordPress editor. Op deze manier kunnen gebruikers eenvoudig content classificeren als intro content. Vervolgens kan de opmaak van deze content aangepast worden met behulp van CSS.

Allereerst moeten we een extra knop toevoegen aan de TinyMCE werkbalk. Met behulp van deze knop kunnen gebruikers eenvoudig elementen classificeren. Met onderstaande functie wordt de betreffende knop binnen de TinyMCE editor werkbalk geplaatst. De betreffende functie kun je in je functions.php thema bestand plaatsen:

function prefix_add_styleselect($buttons) {
	array_unshift($buttons, 'styleselect');

	return $buttons;
}

add_filter('mce_buttons_2', 'prefix_add_styleselect');

Vervolgens passen we de TinyMCE configuratie aan zodat TinyMCE weet welke CSS klassen beschikbaar moeten zijn voor de gebruiker.

function prefix_set_formats($settings) {
	$settings['theme_advanced_styles'] = 'Lead=lead';

	$style_formats = array(
		array(
			'title' => __('Intro Paragraph', 'textdomain'),
			'block' => 'p',
			'classes' => 'lead'
		)
	);

	$settings['style_formats'] = json_encode($style_formats);

	return $settings;
}

add_filter('tiny_mce_before_init', 'prefix_set_formats');

Binnen de WordPress WYSIWYG editor zien we nu een extra knop met stijlen verschijnen waarin de klasse “Intro” is opgenomen.

Binnen je CSS bestand kun je vervolgens voor de elementen die geclassificeerd zijn als “Intro” een andere (afwijkende) opmaak definiëren.

Geplaatst in Geen categorie | 4 Reacties

Custom post types weergeven in categorie archief

Sinds WordPress 3.0 is het mogelijk om op maat gemaakt bericht typen (custom post types) te definiëren. Deze op maat gemaakte bericht typen kunnen net als de standaard bericht typen ingedeeld / geclassificeerd worden met behulp van de WordPress taxonomie systeem. Dit kan op basis van de standaard ingebouwde taxonomieën van WordPress (categorieën en tags) of op maat gemaakte taxonomieën.

Tijdens het definiëren van een op gemaakt bericht type kun je aangeven welke taxonomieën beschikbaar moeten zijn voor het betreffende bericht type. In onderstaande code fragment wordt een op maat gemaakt bericht type ‘project’ gedefinieerd waarbij de standaard taxonomieën categorieën en tags beschikbaar worden gesteld:

register_post_type(
	'project',
	array(
		'label' => 'Projects' ,
		'public' => true ,
		'taxonomies' => array('category', 'post_tag') ,
		'has_archive' => true ,
		'rewrite' => array('slug' => 'projecten')
	)
);

Standaard worden deze op gemaakte berichten niet weergegeven op archief pagina’s zoals van categorieën, tags, auteurs, maanden, jaren, etc. In bepaalde gevallen is het wel gewenst om deze daar ook weer te geven. Op het WordPress support forum is een topic “Custom post type tags/categories archive page” te vinden waarin een aantal oplossingen worden beschreven. Ook op de WordPress Stack Exchange zijn verschillende vragen hierover te vinden: “Displaying custom post type on category pages but not on blog listings“.

Veel van de oplossing maken gebruik van de ‘pre_get_posts’ filter, maar zetten deze naar mijn idee verkeerd in. In veel gevallen worden namelijk functies gebruikt die gebruik maken van de globale $wp_query object. Het is echter netter en beter om gebruik te maken van het query object die wordt doorgegeven aan de filter functie. In onderstaand code fragment is daar een voorbeeld van te zien:

function prefix_archive_any_post($query) {
	if($query->is_archive() && !$query->get('suppress_filters')) {
		$postType = $query->get('post_type');

		if(empty($postType)) {
			$postType = 'any';
		}

		$query->set('post_type', $postType);
    }

	return $query;
}

add_filter('pre_get_posts', 'prefix_archive_any_post');
Geplaatst in Geen categorie | Een reactie plaatsen

Ancestor CSS klasse voor aangepaste links

Als WordPress ontwikkelaar ben je er vast en zeker een keer tegen aan gelopen. Je voegt aan een menu een aangepaste link toe om naar een specifieke WordPress taxonomie archief te linken. Vervolgens wordt dit menu item niet als actief getoond wanneer je op een bericht uit dit archief zit.

WordPress ontwikkelaar Karel-Jan Tolsma van Pronamic heeft een aantal maanden terug een oplossing voor bedacht voor dit probleem: “Menu active state fix voor WordPress“. Deze oplossing heeft echter als nadeel dat je specifieke ID’s van menu items moet verwerken in je thema functies bestand. Verwijder je een menu item en voeg je later een nieuwe toe dan zal er ook weer geprogrammeerd moeten worden.

Om die reden hebben we een betere oplossing bedacht.

function prefix_nav_menu_css_class($classes, $item) {
	if($item->type == 'custom') {
		$isAncestor = strncmp(get_permalink(), $item->url, strlen($item->url)) == 0;
		$isHome = untrailingslashit($item->url) == home_url();

		if($isAncestor && !$isHome) {
			$classes[] = 'current-url-ancestor';
		}
	}

	return $classes;
}

add_filter('nav_menu_css_class', 'prefix_nav_menu_css_class', 10, 2);

Je kunt vervolgens in je CSS bestand de klasse ‘.current-url-ancestor’ gebruiken om bovenliggende menu items helemaal naar eigens wens te stylen.

Let op: bij het invoeren van een aangepaste link binnen WordPress dient een volledige absolute URL gebruikt te worden, bovenstaand script zal niet functioneren wanneer een relatieve URL wordt gebruikt (update 18 augustus 2011).

Geplaatst in Geen categorie | Een reactie plaatsen