WordPress is an amazing CMS (Content Management System), specially for writing blogs and articles, but the editor in the admin area looks a bit outdated, however, there are filters to customize the way our content looks while we work on it 🙂

Knowledge about PHP and Js objects/arrays as WordPress filters/callbacks is recommended to customize the editor.

Why I need this?

For upcoming articles in my blog I need to highly customize the default WordPress editor by adding or removing some features and of course changing it’s behaviour. This article will focus on how I started customizing the WordPress editor options.

So, for those of you don’t know, the default WordPress editor uses TinyMce, a poweful, well known, open sourced WYSIWYG editor (What You See Is What You Get) built on Javascript.

Here’s more info about WordPress TinyMCE included editor: https://codex.wordpress.org/TinyMCE

And here’s info about the TinyMCE editor itself: https://www.tinymce.com/

From WordPress: If you want to customize which buttons are shown in the editor, use a custom css file to stylize the visual editor contents, prevent tinyMCE from removing styles, spans, etc.. or to customize every aspect of TinyMCE, you can modify the init settings array with the use of the filter tiny_mce_before_init.

Understanding first how TinyMCE works without WordPress

Here’s how TinyMCE is instantiated via Javascript (for an editor without WordPress):

tinymce.init({
 selector: '#content', //HTML selector to convert into TinyMCE editor
 height: 500, //Editor height
 menubar: false, //Show the menu bar
 plugins: [
 'advlist autolink lists link image charmap print preview anchor textcolor',
 'searchreplace visualblocks code fullscreen',
 'insertdatetime media table contextmenu paste code help wordcount'
 ],
 toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
 content_css: [ //Stylesheets I want to apply to content inside editor (tricky if you don't read the docs)
 '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
 '//www.tinymce.com/css/codepen.min.css']
});

TinyMCE basic example

As you can see, when we instantiate TinyMCE via Javascript we provide an object containg different options for our editor. Each one of these options are well documented at the TinyMCE docs

Now altering the TinyMCE editor in WordPress

Now that we have idea of how TinyMCE is instantiated via Javascript, we can proceed to change the editor options via PHP on WordPress (the proper way of course).

So, in order to start changing TinyMCE options for the WordPress editor, on my child-theme functions.php file I’ve added the next code:

/* wp_editor customizations **************************************************/
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' ); //the Wp filter 
function my_format_TinyMCE( $options ) { //My callback function
    //Alter $options array here
    //Example: $options['selector'] = 'textarea.my_new_editor'; //This will convert the selector 'textarea.my_new_editor' into a TinyMCE editor
    //Don't forget to return the modified array $options or whatever you name it, so the editor can be rendered with your changes
    return $options; //Done
}

For the above code, the filter tiny_mce_before_init will send to our callback function an array of TinyMCE init options that we can alter and then return, so TinyMCE will be initiated with our changes 🙂

When I dump this options array (in my case $options) I end up with an array like the next (bigger of course):

Array(
  [theme] => modern
  [skin] => lightgray
  [language] => en
  [wp_lang_attr] => en-US
  [selector] => #content
  ..
)

Note how both arrays of options (for javascript and for PHP) are similar in their keys and values.

Here’s a catalogue of TinyMce options and their possible values (on Javascript) which you can use on WordPress via PHP to alter the editor settings: TinyMCE init options for javascript – Look at these options further and you’ll have enough for not sleeping in a couple of weeks :p

Notes

There are some good plugins for customizing the WordPress editor (some of them with tons of options) but I can’t have hundreds of plugins on my site for specific customizations when I can code and share some of them 🙂

Note the WordPress filter tiny_mce_before_init is not useful to add external TinyMce plugins to the editor. For this you need to use another wp filter called mce_external_plugins.

Some references and resources

Share this entry