I was searching for a simple way to add my own custom classes to the WordPress 3.0 editor styles/format dropdown (Paragraph, Address, H1, H2, H3 etc etc).
This is a great easy way for clients who can’t / won’t go into the HTML editor to manually add predefined styles to particular elements.
After searching for a while, I couldn’t find a quick and easy way to do it, so I had to resort to the way I used to do it in previous versions of WordPress, via the TinyMCE Advanced Plugin.
This plugin adds a lot of features to the default WordPress editor, one of which of course is adding your own custom classes. (BTW, with this plugin you can also import *all* classes from your theme’s CSS file, if so desired).
This plugin technically did not support WordPress 3.0 at the time of this blog post, but I figured it was still my best option.
After I activated the plugin, I went to the TinyMCE Advanced settings page, and dropped the new “Styles” dropdown box on the editor toolbar.
*You’ll notice that this added a whole new dropdown on the toolbar. Initially I was hoping to just add my custom styles to the default “Paragraph” dropdown (which I think overall is a better experience for the user), but as mentioned, I couldn’t find a way to do it, and decided to go with this plugin.
After placing the new “Styles” dropdown on the toolbar, populating it was actually very simple.
In the advanced section of the settings page there was this option…
In my case, I needed only to add a single class (not my entire theme’s CSS), so I left the box unchecked.
The instructions on the settings page explained how to manually add classes to the dropdown…
Custom CSS styles can be added in /wp-content/plugins/tinymce-advanced/css/tadv-mce.css. They will be imported and used in TinyMCE. Only CSS classes will be used, also div.my-class would not work, but .my-class will.
So to add my new predefined style, I simply went to the referenced file (tadv-mce.css) and added my custom class there. I created a single “note” style…and that looked like this…
/* tadv-mce.css */
.note {}
Now with that done, I went back into my post editor and Viola! My “note” class had appeared in the the dropdown menu….
*You may be wondering where all those extra styles came from (wp-caption, wpGallery, wp-smiley etc etc). Those are default classes added by the plugin. Someone claimed in WP forum thread, they can be removed by commenting out individual classes here-> wp-includes/js/tinymce/themes/advanced/skins/wp-theme/content.css , but it’s not something I have tested out..
So with the style/class is in the dropdown menu, there was only one last thing to do. I dropped the corresponding reference in my style.css file to actually get this styled on the frontend of my site:
.note {font-size: 12px; font-style: italic; }
Also, since I was on WordPress 3.0, and thanks to a tip at this blog post, I added the same class to the editor-style.css file. (Which styled the element in the TinyMCE editor) and I was all done!
For the record, editing the content.css inside wp-includes does not work in my install of version 3.0.1. I still have not found a clean way of adding selectable styles to the editor.
This doesnt work on Safari Mac, tested version 4 and 5. Works fine in Firefox….
There really isn’t an easy answer to this question. The best way to add styles is to leave the visual editor turned off, and just write the html. Using the visual editor has a way of messing things up sooner or later anyway.
William: As Thecitizen says in this post, the admins users of the websites that we make are not html capable, so is very important to have the possibility to add styles in the dropdown box in the tinymce editor. And turn-off for them the html editor, because they can do very messy things if they touch the html!
Thanks for the post, thcitizen, it will be easier to do this task in wp, as more we use as a cms and not only as a blog.
Here’s how:
http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_css
Thanks, Zachary. Where would you put the referenced filter code?
Thanks for the great information. I have been looking all over for this.
By the way if you are trying to keep the visual editor from overwriting your code, try using classes, ids or inline styles which don’t seem to be overwritten.
For example I was using a table with nowrap=”nowrap” which it would overwrite. It wouldn’t overwrite style=”white-space: nowrap;” I know this is a hack but it works.
Here is another way of doing it: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/. You don’t need the plugin en existing styles are removed.
Nice one, some valuable tips in this post!!
thanks for sharing
Adding preset classes to Tiny MCE is supper easy with a simple plugin, see this short tutorial here:
http://www.atwebmedia.com/blogging/how-to-add-preset-styles-classes-to-wp-posts-with-minimum-coding-wordpress-css-dropdown-menu
Cheers,
Alek
does not work nor dpo any of the plugins listed here. somebody needs to write a functional plugin
Thanks for this post. I’m still having some issues adding custom styles, but am playing with it.
Try this by putting the code below into your functions file:
function yourprefix_tiny_mce_before_init( $init_array ) {
$init_array['theme_advanced_styles'] = “your_style=your_class;another_class=your_class2″; // filter styles
$init_array['theme_advanced_blockformats'] = “p,h3,h4,h5″; // filter formats
return $init_array;
}
add_filter( ‘tiny_mce_before_init’, ‘yourprefix_tiny_mce_before_init’ );
Where “your_style_name=your_class; another_style_name=your_class2″; is where you add the class styles/names you want to appear in the tinyMCE Style dropdown.