23 May 2017

Creating new editor styles in Tiny MCE

Here is a handy snippet that will allow you to create your own preformatted custom styles within the Wordpress text editor. The new styles are selected by a drop down field titled Formats. 

This code snippet should be inserted into your themes functions.php file. Notice that is each new field contains some CSS that allows the new style to be visible from within the text editor itself. Additional CSS can be piled on using the themes styles.css file.

Wordpress TinyMCE


add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
add_editor_style();
}

add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
array_unshift($buttons, 'styleselect');
return $buttons;
}

add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
$settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';

// From http://tinymce.moxiecode.com/examples/example_24.php
$style_formats = array(
array('title' => 'Image caption', 'inline' => 'span', 'classes' => 'caption', 'styles' => array('color' => '#ff0000')),
array('title' => 'Another style', 'inline' => 'span', 'classes' => 'caption', 'styles' => array('color' =>
'#333222')),
);
// Before 3.1 you needed a special trick to send this array to the configuration.
// See this post history for previous versions.
$settings['style_formats'] = json_encode( $style_formats );

return $settings;
}