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.