I've added the styles dropdown list to my TinyMCE editor in Wordpress. If I select the style, and preview it on the front end, it looks exactly like I expect it to. However, I'd like to preview it in the editor as well.

By adding my '.blue-button' class to /wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css, I was able to preview it like I want to, but this seems hackish and will probably break upon a TinyMCE update. Is there a filter to do this?

So far I have the following:

add_filter('tiny_mce_before_init', 'customizeWYSIWYGToolbar' );
function customizeWYSIWYGToolbar($init) {
    $init['theme_advanced_buttons2_add_before'] = 'styleselect'; // Adds the buttons at the begining. (theme_advanced_buttons2_add adds them at the end)
    $init['theme_advanced_styles'] = 'Blue Button=blue-button';
    $init['theme_advanced_disable'] = 'underline, justifyfull, charmap, pasteword';
    return $init;

add_filter( 'mce_css', 'tdav_css' );

add_action('init', 'WYSIWYGCSS');
function WYSIWYGCSS(){
    wp_enqueue_style( 'wysiwygStyles', get_bloginfo('stylesheet_directory').'/css/admin.css', ",",'all' ); 


1 Answer 1


You're looking for add_editor_style(). Just drop that in your functions.php file and then put an editor-style.css file in your theme with whatever styles you want.

  • Meant to respond a long time ago. This worked, but not without accidentally clearing some kind of cache. I had to make my after_setup_theme action hook ONLY contain add_editor_style, save, refresh a dashboard page, then add the rest of my after_setup_theme code back. Sep 13, 2012 at 20:06

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .