Support » Fixing WordPress » How to add a button that will use custom CSS class to TinyMCE WYSIWYG editor

  • How can I add a button that will use a class that I’ll create in wordpress’ CSS files to TinyMCE editor?

    I don’t explicitly need to add a button, I might add into “format” dropdown list with my setting, if someone can guide me how or tell me of appropriate plugin?

    Please help me out, this is really urgent. I’ve seen most of the WP plugins, and most of them have unnecessary functions.

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Add this to your theme’s functions.php file.

    This will add your custom classes to the dropdown.

    function custom_mce_styles( $init ) {
        $init['theme_advanced_buttons2_add_before'] = 'styleselect';
        $init['theme_advanced_styles'] = 'Style Name=styleclass,Style Name2=styleclass2';
        return $init;
    }
    
    add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

    Obviously you’ll replace Style Name=styleclass,Style Name2=styleclass2 with your own comma sep. list of names and classes.

    Ok, thanks, but I can’t get it to work.

    I’ve created .highlighted in my CSS file, and I want to implement it to the dropdown.

    So should I add this:

    function custom_mce_styles( $init ) {
        $init['theme_advanced_buttons2_add_before'] = 'styleselect';
        $init['theme_advanced_styles'] = 'Highlighted Style=highlighted';
        return $init;
    }
    
    add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

    Please rewrite the code if it’s not correct (I guess it’s not).

    And where exactly do I add it in functions.php (does it matter as I guess it should follow some hierarchy in that file)

    Thank you very much for your help

    You can add that code anywhere within your functions.php file. I just tried it and the result was a ‘Styles’ dropdown in the second row of buttons in the visual editor with one option – ‘Highlighted’.

    To style the appearance of the display within the visual editor, you need to create an editor stylesheet in your theme folder – ex: editor-style.css

    Use this in your functions.php file to make TinyMCE apply the style within the editor.

    function my_mce_css() {
    	return get_bloginfo('template_url').'/editor-style.css';
    }
    
    add_filter( 'mce_css', 'my_mce_css' );

    Note – if you want the style dropdown on the first row of buttons

    function custom_mce_styles( $init ) {
        $init['theme_advanced_buttons1_add_before'] = 'styleselect';
        $init['theme_advanced_styles'] = 'Highlighted Style=highlighted';
        return $init;
    }
    
    add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

    Thank you very much. I’ve got it to work, but I didn’t get you on how to make it work on WYSIWYG mode.

    What should I put in the CSS file you’re mentioning?

    Thank you

    You would put the appropriate style rules for your custom classes, ex:
    .highlighted { background-color: yellow; }
    Then when the user applies your custom style in the editor, it will match what is shown on the front-end of the site.

    I’ve got you now. Thank you very much for your help.

    Best regards

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to add a button that will use custom CSS class to TinyMCE WYSIWYG editor’ is closed to new replies.