Recently I had a chance to work on a WordPress website that required extended functionality of the visual editor in WordPress. The rich text editor in WordPress is actually an implementation of TinyMCE – the platform independent web based Javascript HTML WYSIWYG editor.
Screen shot of the TinyMCE demo on the official website
It is very easy to extend the functionality of TinyMCE in WordPress, by applying several filters. So, let’s get started!
Available TinyMCE filters in WordPress
According to the official WordPress Filter Reference, the following filters can modify the configuration of the rich text editor.
- mce_spellchecker_languages: applied to the language selection available in the spell checker.
- mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4: applied to the rows of buttons for the rich editor toolbar (each is an array of button names).
- mce_css: applied to the CSS file URL for the rich text editor.
- mce_external_plugins: applied to the array of external plugins to be loaded by the rich text editor.
- mce_external_languages: applied to the array of language files loaded by external plugins, allowing them to use the standard translation method (see tinymce/langs/wp-langs.php for reference).
- tiny_mce_before_init: applied to the whole init array for the editor.
I was particularly interested in mce_buttons and tiny_mce_before_init, since I had a request to add a font size drop down list, with custom font sizes available for selecting. The main problem I had to solve was to find a way to interact with TinyMCE.
How to add buttons to the rich text editor in WordPress?
The four mce_buttons filters provide direct access to a particular group/row of buttons in TinyMCE. mce_buttons provides access to the first row of buttons, mce_buttons_2 provides access to the second row, mce_buttons_3 lets you add a third row of buttons etc. If you like you can completely overwrite any default button set.
So, first I needed to find a list of all the buttons that TinyMCE has to offer. I found it through the TinyMCE Custom Buttons page on WordPress.org.
Since I wanted to add the font size drop down list as first button in the second row of buttons, I hooked a function to the mce_buttons_2 filter.
The following code is part of the functions.php file of my WordPress theme.
// Add more buttons (font size select, superscript text, subscript text) to the rich text editor (TinyMCE) in WordPress
// $buttons is a variable of type array that contains default TinyMCE buttons for a particular row.
// I use array_unshift() to add the additional buttons in front of all the other buttons in the row. If you want to achieve the complete opposite, use array_push().
function register_additional_button($buttons) {
array_unshift($buttons, 'fontsizeselect' ,'sup', 'sub');
return $buttons;
}
// Assigns register_additional_button() to "mce_buttons_2" filter
add_filter('mce_buttons_2', 'register_additional_button');
Font size, superscript and subscript buttons added to TinyMCE in WordPress
Now that I had the font size drop down list (and two more buttons) in place, I needed to find a way to overwrite the default font size options. I discovered that this is also very easily achievable through the tiny_mce_before_init WordPress filter.
Why use tiny_mce_before_init?
The options in the font size drop down list are generated once TinyMCE is initialized, so if you want to change the default options you need to change the default parameters before TinyMCE is initialized, thus use tiny_mce_before_init.
tiny_mce_before_init provides direct access to the default parameters of TinyMCE in WordPress and allows modifications to your preference.
In my case, I wanted to make the text sizes: “10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 21px, 22px, 23px, 24px, 25px, 26px, 27px, 28px, 29px, 30px, 32px, 48px”, accessible through the font size drop down list.
All I needed to do, was to set a specific value in a variable through a custom function and hook that function through the tiny_mce_before_init filter.
The following code is also part of the functions.php file of my WordPress theme.
// Add custom text sizes in the font size drop down list of the rich text editor (TinyMCE) in WordPress
// $initArray is a variable of type array that contains all default TinyMCE parameters.
// Value 'theme_advanced_font_sizes' needs to be added, if an overwrite to the default font sizes in the list, is needed.
function customize_text_sizes($initArray){
$initArray['theme_advanced_font_sizes'] = "10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px,32px,48px";
return $initArray;
}
// Assigns customize_text_sizes() to "tiny_mce_before_init" filter
add_filter('tiny_mce_before_init', 'customize_text_sizes');
So, in the end here is what I achieved.
The final customized font size drop down list in TinyMCE in WordPress
I offered options for selecting a specific text size while formatting posts in WordPress. I additionally added superscript and subscript text buttons as those were also needed for this specific project.
That’s it!
Extending WordPress is usually a straightforward process and, almost always, anything can be achieved by assigning a function through a filter. As you can see from the examples above, it is easy to achieve very practical solutions with just a few lines of code.
Even though my blog is in Macedonian, I encourage you to ask any questions that you might have, and I’ll try to answer them.
