In the text editor, where you can set headings and other settings, is it possible to add your own styles for clients to use? and even remove the unnecessary ones?
The “classic” TinyMCE editor has two dropdowns: formatselect
for paragraph styles and styleselect
for character styles – which can also contain paragraph styles, to make it more confusing. The configuration in WordPress by default only shows the format dropdown. If you apply a custom stylesheet to the editor, TinyMCE can use it to pick up the classnames and add them to the style dropdown – but this did not work every time for me.
Since 3.0 you can call add_editor_style()
in your functions.php
to add a stylesheet to the editor. By default it’s editor-style.css
in your theme directory. Before 3.0 you have to hook into the mce_css
filter to add the URL to your editor stylesheet. This will end up in the content_css
TinyMCE configuration value.
To add the style dropdown, the styleselect
option must appear in one of the button bar configuration arrays (theme_advanced_buttons[1-4]
in TinyMCE, filtered by mce_buttons_[1-4]
in WordPress). The list of block formats is controlled by the theme_advanced_blockformats
option of TinyMCE, which you can add to the control array in the tiny_mce_before_init
filter. If you want to customize the names of the style dropdown (not just your CSS class names), look at the theme_advanced_styles
option. You can also use the more advanced style_formats
option which gives you more flexibility to define the styles.
The relevant PHP code with all the hooks and default configuration is in wp-admin/includes/post.php
, in function wp_tiny_mce()
. All together, your setup could look like this:
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' => 'Bold text', 'inline' => 'b'),
array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
array('title' => 'Table styles'),
array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
);
// 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;
}