Creating TinyMCE Custom Styles on WordPress

For those who want their WordPress TinyMCE customized, this tutorial will be an easy guide to achieve custom styles on WordPress 3.

TinyMCE custom styles example

Script below is an example to add Inline Pre (span tag element and its class is inline-pre) and Inline Highlight (span tag element and its class is inline-highlight). Where are the class names coming from? I named them, because it’s custom styles.


function fb_change_mce_buttons($initArray) {
    $initArray['theme_advanced_buttons2']  = 'formatselect,styleselect,|,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help';
    $initArray['style_formats'] = json_encode(array(
        array('title' => 'Inline Pre','inline'=>'span', 'classes' => 'inline-pre'),
        array('title' => 'Inline Highlight','inline'=>'span', 'classes' => 'inline-highlight'),
    ));

   return $initArray;
}

add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

The result

The Inline Pre example: This line is styled by Inline Pre.

The Inline Hightlight example: This line is styled by Inline Highlight.

Okay enough with the result samples. I think you want an explanation.

How to make your own TinyMCE custom styles

Before you fulfill your needs, you have to learn, or at least, read these documentation and other sources which paying attention to this TinyMCE customization matter.

What to prepare

You have to remember that you have to add some codes to your WordPress theme as follow:

  • Visual editor CSS
  • Theme CSS
  • Functions.php

Visual editor CSS and theme CSS

For example, you are creating Red Bold and Blue Italic styles. You have to write it in visual editor css, and theme css.

.red-bold{color: #ff0000; font-weight: bold} .red-bold{color: #0000ff; font-style: italic}

Functions.php

At the very top of this article you’ve seen the highlighted PHP script. Now you can make change:


array('title' => 'Red Bold','inline'=>'span', 'classes' => 'red-bold'),
array('title' => 'Blue Italic','inline'=>'span', 'classes' => 'blue-italic'),

So it will look like this.


function fb_change_mce_buttons($initArray) {
    $initArray['theme_advanced_buttons2']  = 'formatselect,styleselect,|,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help';
    $initArray['style_formats'] = json_encode(array(
         array('title' => 'Red Bold','inline'=>'span', 'classes' => 'red-bold'),
         array('title' => 'Blue Italic','inline'=>'span', 'classes' => 'blue-italic'),
    ));

   return $initArray;
}

add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

Copy the script and add it to your theme functions.php. Oh if you have trouble about how to add your visual editor style your can read Function Reference/add editor style. But, it can be easily achieved by adding this line to your functions.php:


add_editor_style('visual-editor-style.css?r='.rand(1,20000));

Why is that ?=.rand(1,20000) ? It’s useful to let your style in CSS file up to date because many times browsers are caching the files and make your head dizzy and asking ‘Why the styles keep the same when I have changed and saved it!?’ Useful isn’t it?

After you’ve done with the installation please open your Add New posts. See if the style box is there.