Customize WordPress WYSIWYG Editor

Adjustments to the editor TinyMCE via hook, so regardless of the core files of WordPress is also possible and must be used in a number of requirements. So in this article are some examples that can be adapted to its needs and should give an introduction of customizing the TinyMCE editor in WordPress.

You put the following code snippet in the functions.php of the theme or stores it into a Plugin. There are a whole range of possibilities and I would like to show only a small range of them. Adjusting the buttons is quite comfortable to do via the Plugin TinyMCE Advanced.

Adjust HTML-Filter

The default editor is set to always generate xHTML 1.0 and thus not all tags are allowed; a classic example are iframes, which you use for Google Map for example. Sure there are other approaches via short code, etc., but this is not the today topic. Merely as an example, allowing the tag iframe, with various attributes, and the Tags must be added to the variable $ext.

function fb_change_mce_options($initArray) {
	// Comma separated string od extendes tags
	// Command separated string of extended elements
	$ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';

	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	// maybe; set tiny paramter verify_html
	//$initArray['verify_html'] = false;

	return $initArray;
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

Customizing the function of the buttons in your Editor

A way to expand the block formats (theme_advanced_blockformats) or modify and disable a few buttons in your editor (theme_advanced_disable).

function fb_change_mce_buttons( $initArray ) {
	$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
	$initArray['theme_advanced_disable'] = 'forecolor';

	return $initArray;
add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

Change language of spelling

In our third case, we adapt the language of the spelling checker, in our example we will now allow German and English only.

function fb_mce_external_languages($initArray){
	$initArray['spellchecker_languages'] = '+German=de, English=en';

	return $initArray;
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

The default values of WordPress

Following the values that are used in the standard of wordpress which gives an insight into the possibilities for the transfer of the array.

'mode' => 'specific_textareas'
'editor_selector' => 'theEditor'
'width' => '100%'
'theme' => 'advanced'
'skin' => 'wp_theme'
'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv'
'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help'
'theme_advanced_buttons3' => ''
'theme_advanced_buttons4' => ''
'language' => 'de'
'spellchecker_languages' => 'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv'
'theme_advanced_toolbar_location' => 'top'
'theme_advanced_toolbar_align' => 'left'
'theme_advanced_statusbar_location' => 'bottom'
'theme_advanced_resizing' => true
'theme_advanced_resize_horizontal' => false
'dialog_type' => 'modal'
'relative_urls' => false
'remove_script_host' => false
'convert_urls' => false
'apply_source_formatting' => false
'remove_linebreaks' => true
'gecko_spellcheck' => true
'entities' => '38,amp,60,lt,62,gt'
'accessibility_focus' => true
'tabfocus_elements' => 'major-publishing-actions'
'media_strict' => false
'paste_remove_styles' => true
'paste_remove_spans' => true
'paste_strip_class_attributes' => 'all'
'wpeditimage_disable_captions' => false
'plugins' => 'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus'





21 responses to “Customize WordPress WYSIWYG Editor”

  1. Brandon Martinez Avatar

    Awesome! Thanks! I’ll have to use this in some themes I’m putting together.

  2. Tiago Morena Avatar

    Great post! Thank you very much for this little hack! I´m developing a theme for a client and it´s important to control what he can use in the editor to preserve the overall theme layout. The tutorial worked really nice. Thank you again!

  3. desarrollo web Avatar

    Excelent article & tutorial!

    A greeting.

  4. Hunter Satterwhite Avatar

    Is there any way to easily integrate a select, few custom styles? For instance specific classes or id’s in to the Format box or the style selector?

    Very cool tutorial; I’ll be using this one for sure. Has WP3.0 made any improvements to the WYSIWYG editor?

  5. Carlos Avatar

    Some of these settings dont seem to change behavior, e.g.:

    ‘remove_linebreaks’ => true

    …if I change that to false, linebreaks are still removed. Is something else controlling this?

  6. Sebastien Avatar

    Do you know how we can add a style from the list of styles tinymce ?

  7. […] Customize WordPress WYSIWYG Editor […]

  8. Frank Avatar

    Own Stylesheet for the TinyMCE:

    function ses_tinymce_css($wp) {
    $wp .= ',' . get_bloginfo('stylesheet_url');
    return $wp;
    add_filter( 'mce_css', 'ses_tinymce_css' );

  9. […] Customize WordPress WYSIWYG Editor […]

  10. cliotine Avatar

    Thanks for the tutorial, very usefull !
    I’d like to know too how to add a style from the list of styles tinymce ?
    I personalized your function adding :
    “$initArray[‘theme_advanced_blockformats’] = ‘p,h2,h3,introduction’;” and I’d like to define my style “introduction”

    Thanks for your help !

  11. Lucian Apostol Avatar

    The fact that rte editor screw up my HTML code is also annoying me a lot.

    I’ve fixed it up few weeks ago.

  12. Victor Teixeira Avatar
    Victor Teixeira

    The default wordpress tnymce implementation doesn’t have the style dropdown.

    I think you can add it using the tinymce advanced plugin.

  13. Олег Avatar

    code – visible and not work!

  14. Darío Ferrer Avatar

    Very useful. Thanks Frank.

  15. slee Avatar

    This is a great tip it worked perfectly to set the width of the editor i shall be using this in all my future websites.

    One problem though i cannot get ‘remove_linebreaks’ to be set to false to stop removing the line breaks.

    have you managed to get this to work?

  16. Martin Avatar

    Changing the language of spelling was something I always wanted to do and as time went by I forgot about it. Now with this simple explanation it’s done!

    Thanks mate!!!

  17. mercime Avatar

    Thank you Frank. I finally put a stop to multi-colored text in Pages and Posts by disabling forecolor 🙂

  18. […] gibt es einen Post und die passenden Kommentare dazu, dieser liegt in ähnlicher Form auch bei [EN] vor. Bei [EN] habe ich einen Post für die visuellen Anpassungen gefunden. Zu den […]

  19. […] } add_filter('tiny_mce_before_init', 'fb_change_mce_options'); » Source: HTML editor as the defaultI know a lot of tech-savvy persons who don’t really like WordPress […]

  20. Karel Cardinaels Avatar
    Karel Cardinaels

    just what I needed, after trying a few plugins who do not make this happen, this is what fixed it!


  21. Gerry Avatar

    Just a little annoying problem, filter ALWAYS quotes the values.

    So you can get this working:

    But you won’t be able to get this working:
    because you will always get it wrapped in quotes