Adding your custom CSS styles to the word press WYSIWYG native editor (TinyMCE editor)

I’ve always found a bit odd why couldn’t we apply our own css styles when writing our Word Press Posts and pages.

So I’ve done a bit of research and I came up with a solution to get this done.

The objective is to be able to apply your own CSS styles (classes) to the elements in your posts and pages. E.g. if you want an image to float left, simply apply the “fLeft” class. Or by the other hand if you need an image to float right, just apply it the fRight class.

For a code savvy user this is no obstacle, since he can use the code mode in the editor and apply the classes by hand. But for most of the WP users (e.g. Our clients) this is a no-go situation, that you need to sort.

In this tutorial we will do it. Simply define you classes in your styles.css or other linked CSS, and latter apply them by means of a select box with all your custom styles listed.

Easy!

From version 2.7 and above TinyMCE is loaded separately from other Javascript.

File to edit: wp-admin/includes/post.php

Step 1. Creating the select box to apply your custom styles

Go to line 1278 or spot the chunk bellow: (if by version change, these chunks have moved, just browse to the //TinyMCE comment and start from there. Beware that probably the code syntax might have changed too, and might not look exactly the same as well, use common sense.)

$mce_buttons_2 = apply_filters(‘mce_buttons_2′, array(‘formatselect’, ‘underline’, ‘justifyfull’, ‘forecolor’, ‘|’, ‘pastetext’, ‘pasteword’, ‘removeformat’, ‘|’, ‘media’, ‘charmap’, ‘|’, ‘outdent’, ‘indent’, ‘|’, ‘undo’, ‘redo’, ‘wp_help’));

And just add you “select box” to it, by adding ‘styleselect‘ to that object.

The code should now look like this (beware not to add the last , (comma)):

$mce_buttons_2 = apply_filters(‘mce_buttons_2′, array(‘formatselect’, ‘underline’, ‘justifyfull’, ‘forecolor’, ‘|’, ‘pastetext’, ‘pasteword’, ‘removeformat’, ‘|’, ‘media’, ‘charmap’, ‘|’, ‘outdent’, ‘indent’, ‘|’, ‘undo’, ‘redo’, ‘wp_help’, ‘styleselect’ ));

Step 2. Adding your options (your custom classes) to the select box

Go to line 1278, or spot the chunk bellow:

// TinyMCE init settings

$initArray = array (

‘mode’ => ‘specific_textareas’,

‘editor_selector’ => ‘theEditor’,

‘width’ => ’100%’,

‘theme’ => ‘advanced’,

‘skin’ => ‘wp_theme’,

‘theme_advanced_buttons1′=> “$mce_buttons”,

‘theme_advanced_buttons2′=> “$mce_buttons_2″,

‘theme_advanced_buttons3′=> “$mce_buttons_3″,

‘theme_advanced_buttons4′=> “$mce_buttons_4″,

‘language’ => “$mce_locale”,             ‘spellchecker_languages’ => “$mce_spellchecker_languages”,

‘theme_advanced_toolbar_location’ => ‘top’,

‘theme_advanced_toolbar_align’ => ‘left’,

‘theme_advanced_statusbar_location’ => ‘bottom’,

‘theme_advanced_resizing’ => true,

‘theme_advanced_resize_horizontal’ => false,

‘dialog_type’ => ‘modal’,

‘relative_urls’ => false,

‘remove_script_host’ => false,

‘convert_urls’ => false,

‘apply_source_formatting’ => false,

‘remove_linebreaks’ => true,

‘gecko_spellcheck’ => true,

‘entities’ => ’38,amp,60,lt,62,gt’,

‘accessibility_focus’ => true,

‘tabfocus_elements’ => ‘major-publishing-actions’,

‘media_strict’ => false,

‘save_callback’ => ‘switchEditors.saveCallback’,

‘wpeditimage_disable_captions’ => $no_captions,

‘plugins’ => “$plugins”,

);

And add your class names to the existing array shown above.

‘theme_advanced_styles’ => ‘Left=fleft,Right=fright‘

I’ve added two custom classes: .fleft and .fright to style my elements as I want. The CSS to do it will be explained at the end.

The chunk above now should look like this, with the above line added to the bottom:

// TinyMCE init settings

(…)

‘save_callback’ => ‘switchEditors.saveCallback’,

‘wpeditimage_disable_captions’ => $no_captions,

‘plugins’ => “$plugins”,

‘theme_advanced_styles’ => ‘Left=fleft,Right=fright’

);

So this adds the options to the select box we created on step 1. Let’s proceed to the CSS

Step 3. Defining the CSS classes (the options) you will later invoke in the select box

Edit your CSS theme file: eg. wp-content/themes/YOURTHEME/style.css

Define the classes you created above. In this example: .fleft and .fright and to do that I’ve simply added the chunk bellow to the bottom of the CSS file:

.fleft{

float:left;

}

.fright{

float:right;

}

And that’s about it!

You can create the all classes you wish (options in the select box) and then define them in your CSS, and just apply them, or let your client apply them safely in the WYSIWYG editor. This should work most of the time.
Button list
Here is a list of buttons that you can add to the editor, most of them are self explanatory. To get more info see the TinyMCE documentation: http://tinymce.moxiecode.com/documentation.php

bold
italic
underline
strikethrough
justifyleft
justifycenter
justifyright
justifyfull
bullist
numlist
outdent
indent
cut
copy
paste
undo
redo
link
unlink
image
cleanup
help
code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
charmap
visualaid
anchor
newdocument
separator

1 Comment »